在 Ember v1.12 组件中绑定 HTML 输入值答案

【问题标题】：Binding HTML Input value in Ember v1.12 Component在 Ember v1.12 组件中绑定 HTML 输入值
【发布时间】：2016-12-01 03:58:34
【问题描述】：

我需要在组件中使用 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 中不工作。

Twiddle - 1.13

Twiddle - 1.12

【问题讨论】：

1.13 是第一个包含 glimmer 的版本，我认为这在 1.12 中是不可能的，你必须使用输入助手
你试过这个 {{input value=name action='nameDidChange' on='change'}} 吗？

标签： javascript ember.js

【解决方案1】：

据我所知，您无法在 Ember 1.13 之前设置动作助手的值（如果我错了，我会很高兴收到通知）。结果，您的 twiddle 不适用于 1.12 版本，我不知道如何修复它。

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

【讨论】：

【解决方案2】：

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

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

我创建了一个Ember Twiddle example 来演示。

【讨论】：