Ember的单向约束输入？

Question

Ember's default {{input}} helper creates a two-way binding. What's the state-of-the-art way to create an input element that is only one-way bound?

A Google search for "ember one-way input" yields several add-ons:

• https://github.com/DockYard/ember-one-way-controls
• https://www.npmjs.com/package/ember-one-way-input

but do I need an add-on?

Answer 1

The simplest way is to use the normal html <input> instead of the {{input}} helper:

<input value={{foo}} />

and if you want to trigger an action on change:

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

This is one-way bound, and works as expected.

Answer 2

I belive you can achieve this with the help of oneWay() helper. 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 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"

Answer 3

input helpers works with two-way binding by default.

There are different alternatives to achieve one-way behaviour:

1. rendering your own html input tag: twiddle-1
2. creating a template-less component whose tagname is input : twiddle-2
3. using addons as you've mentioned.

Answer 4

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

But I'd say I have found https://github.com/DockYard/ember-one-way-controls quite helpful in day to day development.