Javascript EmberJs：具有值绑定的自有视图

我想使用我自己的Ember.View实现，但不幸的是valueBinding不起作用（它与内置的一起工作）

在模板中：

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

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

---

Bodo

与其扩展

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: ''
});

请看这里的工作说明

---

希望有帮助。

我让它在本地工作。这里有几件事不对。它不起作用，因为当您使用

this.get（'value'）在控制器中，它正在寻找控制器本身中不存在的属性“value”，因此未定义。此外，“value”是余烬视图的保留属性，因此不能将其视为输入的value属性

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

HTML HBS：

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

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'));
  }
});

Javascript：

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

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'));
  }
});

因此，基本上，控制器有一个名为cValue的属性，它绑定到NumberView的
值。在NumberView中，我使用didInsertElement（）函数将自己的函数调用
\u change（）
附加到输入的更改事件。在
\u change（）
中，我将NumberView的值设置并更新为输入的当前值

这是一个工作
这是一个开始，但我想知道我错过了什么本土工作