0

我想使用我自己的 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？

博多

4

2 回答 2

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。

希望能帮助到你。

于 2013-06-22T17:47:24.057 回答
1

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

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

HTML 哈佛商学院：

{{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 的属性，它是绑定到valueNumberView 的。在 NumberView 中，我使用 didInsertElement() 函数将我自己的函数调用附加_change()到输入的更改事件。在_change()中，我将 NumberView 的值设置并更新为输入的当前值。

这是一个有效的JSBin

于 2013-10-28T16:48:09.140 回答