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绑定value属性，但是当我更改文本框值时，value属性没有更新，并且valueObserver没有被触发。

如何绑定输入类型的值属性=＆＃34; text＆＃34;？我是否必须从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

绑定组件值未更新

1 个答案: