绑定组件值未更新

Question

我有这个组件：

App.AppTestComponent = Ember.Component.extend({
  tagName: 'input',
  type: 'text',
  value: undefined,
  attributeBindings: ['type', 'value'],
  
  valueObserver: function() {
    console.log('This code is never triggered');
  }.observes('value')
});

我使用 attributeBinding 绑定值属性，但是当我更改 textbox 值时，值属性没有更新，而 valueObserver 没有更新'触发。

如何绑定到输入 type="text" 的值属性？我必须从 Ember.TextField 延长吗？

这是问题的一个例子：http://emberjs.jsbin.com/lodisucasa/1/edit?html,js,output

Answer 1

我正在研究 Ember 代码以查看它如何用于 Ember.TextField 组件（参见 here）。

我在那里没有看到任何具体内容，但我注意到该组件正在使用 TextSupport mixin（请参阅 here）。

如果你查看 TextSupport mixin (here)，你会看到它监听 input 事件，然后通过主动设置 value 属性内部 _elementValueDidChange 方法：

this.on("input", this, this._elementValueDidChange);

所以...如果您希望您的组件具有相同的功能，您需要执行以下操作：

App.AppTestComponent = Ember.Component.extend({
  tagName: 'input',
  type: 'text',
  value: "",
  attributeBindings: ['type', 'value'],

  init: function() {
    this._super.apply(this, arguments);
    this.on("input", this, this._elementValueDidChange);
  },

  _elementValueDidChange: function() {
    Ember.set(this, 'value', this.$().val());
  },

  valueObserver: function() {
    console.log('This code is never triggered');
  }.observes('value')
});

工作示例here

绑定组件值未更新

Bound component value isn't updating

ember.js