Question

我想使用我自己的Ember.View实现，但遗憾的是valueBinding不起作用（它适用于内置的）

App.NumberView = Ember.View.extend({
  tagName: 'input',

  attributeBindings: ['type', 'min', 'max', 'step', 'value', 'placeholder'],

  type: 'number',
  step: '0.01',
  min: '0',
  max: null,
  placeholder: null,
  value: ''
});

在模板中：

{{view App.NumberView id="value" valueBinding="value" placeholder="39.90"}}
<button type="button" {{action submit}}>submit</button>

在控制器中：

App.SomeController = Ember.Controller.extend({
  submit: function() {
    // returns undefined
    this.get('value');
  }
});

我自己的NumberView缺少什么来支持valueBinding？

博多

Answer 1

您可以直接扩展Ember.View，而不是扩展Ember.TextField。

例如：

App.NumberView = Ember.TextField.extend({
  attributeBindings: ['type', 'min', 'max', 'step', 'value', 'placeholder'],
  type: 'number',
  step: '0.01',
  min: '0',
  max: null,
  placeholder: null,
  value: ''
});

请参阅此处了解正常工作jsbin。

希望它有所帮助。

Answer 2

我让它本地工作。这里有一些错误。它没有用，因为当你在控制器中使用this.get('value');时，它在控制器本身中寻找属性'value'，它不存在，因此是未定义的。此外，'value'是Ember View的保留属性，因此您不能将其视为输入的value属性。

您需要做的是将视图的valueBinding设置为控制器中的自定义属性/属性。这会将View的值绑定到Controller（而不是View的Input的值）。为了绑定实际的html输入值，您必须手动传播更改并设置View的值。我会在这段代码之后解释一下。

HTML HBS ：

{{view App.NumberView valueBinding="cValue" placeholder="39.90"}}

<强>的Javascript ：

App.NumberView = Ember.View.extend({
  didInsertElement: function(){
    this.change = $.proxy(this._change, this);
  },
  tagName: 'input',

  attributeBindings: ['type', 'min', 'max', 'step',  'placeholder'],

  type: 'number',
  step: '0.01',
  min: '0',
  max: null,
  value: null,

  _change: function(){
    this.set('value',this.$('input').get('context').value);

    console.log('View input value is --> ' + this.$('input').get('context').value);
  }  
});

App.IndexController = Ember.Controller.extend({
  cValue: null,
  submit: function() {
    alert(this.get('cValue'));
  }
});

所以基本上，Controller有一个名为cValue的属性，它绑定到NumberView的value。在NumberView中，我使用didInsertElement（）函数将我自己的函数调用_change()附加到输入的change事件。在_change()中，我将NumberView的值设置并更新为输入的当前值。

这是一个有效的JSBin

EmberJs：拥有价值约束力的自己的观点

2 个答案: