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

Question

我需要在组件中使用HTML输入并需要绑定值。输入助手在某些移动设备上使用时会导致各种错误，因此无法使用。

输入在Ember 1.13或更高版本中有效。

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);
        }
    }
});

如何在Ember 1.12中使用HTML输入并仍然保持功能？

我试过这样的东西，但输入值没有传递给组件的动作：

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);
        }
    }
});

这里有两个Twiddles，一个在1.13中按预期工作，一个在1.12中不起作用。

旋转 - 1.13

旋转 - 1.12

Answer 1

据我所知，你不能在Ember 1.13之前设置动作助手的值（如果我错了，我真的很乐意收到通知）。 因此，你的twiddle不适用于版本1.12，我不知道如何解决它。

我建议的是一种解决方案; 我不太喜欢。 我发布它作为答案，因为它可能就是适合你的解决方案。 请查看我通过修改你创建的旋转 。 我只是使用jquery来提取html输入的值并将其设置为name-input组件的name2字段。 希望这对你有用。

Answer 2

在Ember 1.12.2中，事件对象在您的操作中可用，您可以使用它来获取name-input的值：

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

我已经创建了一个Ember Twiddle示例来演示。