綁定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示例來演示。