绑定Ember v1.12组件中的HTML输入值

Question

I need to use an HTML input in a component and need the value to be bound.The input helper causes various bugs when used on certain mobile devices, so that cannot be used.

The input that works in Ember 1.13 or higher.

component/name-input.hbs

<input type="text" value={{name}} onChange={{action 'nameDidChange' value='target.value'}}>

component/name-input.js

export default Ember.Component.extend({
    name: 'Jim',
    actions: {
        nameDidChange: function(value) {
            this.set('name', value);
        }
    }
});

How do I use an HTML input in Ember 1.12 and still maintain the functionality?

I tried something like this but the input value is not passed to component's action:

component/name-input.hbs

<input type="text" value={{name}} {{action 'nameDidChange' value='target.value' on='change'}}>

component/name-input.js

export default Ember.Component.extend({
    name: 'Dwight',
    actions: {
        nameDidChange: function(value) {
            this.set('name', value);
        }
    }
});

Here are two Twiddles, one in 1.13 that works as expected and one in 1.12 that does not work.

Twiddle - 1.13

Twiddle - 1.12

Answer 1

As far as I know you cannot set value of action helper prior to Ember 1.13 (I would really be happy to be notified if I am wrong). As a result, your twiddle is not working for version 1.12 and I do not know a way to fix it.

What I suggest is kind of a workaround solution; which I did not like very much. I am posting it as an answer because it might just be the case it is an appropriate solution for you. Please see the twiddle I created via modifying yours. I just used jquery to extract the value of the html input and set it to name2 field of name-input component. Hope this works for you.

Answer 2

In Ember 1.12.2, the event object is available in your action, which you can use to acquire the value for name-input:

actions: {
  nameDidChange() {
    const value = event.target.value; // <--
    this.set('name', value);
  },
},

I've created an Ember Twiddle example to demonstrate.