Clever Geek Handbook

One sided entrances in Ember?

Ember default {{input}}

helper creates a two-way binding. What is the modern way of creating an input element that is only one way?

Google search for "one-way input using ember" gives several add-ons:

but do i need an addition?

+3


source to share


4 answers


The easiest way is to use normal html <input>

instead of a helper {{input}}

:

<input value={{foo}} />

and if you want to trigger an action on change:



<input value={{foo}} onchange={{action 'changeFoo' value="target.value"}} />

This is a one-way border and works as expected.

+2


source


I believe you can achieve this with a helper oneWay()

. Check the following link.

https://www.emberjs.com/api/classes/Ember.Binding.html#toc_one-way-bindings https://guides.emberjs.com/v2.13.0/object-model/bindings/#toc_one-way- bindings



Sample code from the ember guides.

user = Ember.Object.create({
  fullName: 'Kara Gates'
});

UserComponent = Ember.Component.extend({
  userName: Ember.computed.oneWay('user.fullName')
});

userComponent = UserComponent.create({
  user: user
});

// Changing the name of the user object changes
// the value on the view.
user.set('fullName', 'Krang Gatessss');
// userComponent.userName will become "Krang Gatessss"

// ...but changes to the view don't make it back to
// the object.
userComponent.set('userName', 'Truckasaurus Gates');
user.get('fullName'); // "Krang Gatessss"
+1


source


input helpers

works with two-way binding by default.

There are various alternatives for achieving one-way behavior:

  • rendering native html tag input

    : twiddle-1
  • creating without template component with tag input

    : twiddle-2
  • using addons as you mentioned.
0


source


You don't need an addon for one way bindings - https://www.emberjs.com/api/classes/Ember.computed.html#method_oneWay

But I would say I found https://github.com/DockYard/ember-one-way-controls quite useful in day to day development.

0


source






More articles:


All Articles