如何覆盖 EmberJS 中的属性绑定？答案

【问题标题】：How to override attribute bindings in EmberJS?如何覆盖 EmberJS 中的属性绑定？
【发布时间】：2015-03-10 11:43:48
【问题描述】：

我正在尝试扩展 Ember.TextField 的某些行为。我正在尝试为type="datetime-local" 输入添加一些逻辑，以便能够直接绑定日期类型的变量。

我们知道，输入值是字符串，而不是日期。因此，在我扩展 Ember.TextField 的新类中，我需要一个新属性来绑定到输入，该属性基本上是将日期转换为输入期望的字符串。理想情况下，我想重新打开 Ember.TextField，然后仅在输入类型为 datetime-local 且绑定值为日期时应用此逻辑。

我的问题是：

有没有办法改变超类中定义的属性绑定？如果可能的话，我可以在我的视图/组件子类中写attributeBindings:['value:textValue']。这将覆盖 Ember.TextField 中先前的值绑定定义。

X-参考：https://github.com/emberjs/ember.js/issues/10176

【问题讨论】：

为什么不能只在视图上拥有一个绑定到文本字段值的属性？它将是一个字符串，您可以有一个观察者正在观察这个值，并在将字符串转换为 JS Date 对象后设置相应的模型/控制器属性（需要是日期）？有什么原因导致这行不通吗？
我想使用{{input value=model.startDate}}，就像我使用普通输入一样。问题是我希望将属性命名为value 以正常使用输入助手。

标签： ember.js

【解决方案1】：

attributeBindings 是一个“连接属性”，这意味着它是一个数组，它从继承链上的每个类（包括 mixins）中提取和组合值。根据对 Ember 代码的粗略阅读，似乎链上“较低”的条目被放置在串联数组中更早。构建元素时，属性绑定按顺序执行，这意味着较早的（较低的，你的）属性被后面的（较高的，他们的）覆盖。

根据您的观点，您可能会将此称为错误。

假设一个更高（更超级）的班级说att1: val1，而一个更低（不太超级）的班级说att1: val2。然后val1 将“获胜”。

更改用于att1 的属性值的替代方法是简单地在您的子类中重新定义val1，它会被正确拾取。

【讨论】：

是的，我知道串联属性。我正在尝试的是覆盖特定的连接属性。在这种情况下，Ember.TextField 定义了attributeBindings:['value']。我正在尝试继承Ember.TextField 并重新定义为attributeBindings:['value:textValue']。我已经尝试过了，似乎后者被忽略了。

【解决方案2】：

虽然不是最易于维护的行走路径，但您可以在视图中的 init 事件上手动删除和添加属性绑定。 Here is a working JS Bin.

只需将属性绑定视为 ember 数组，并将 addObject 和 removeObject 与完整的绑定字符串一起使用（例如，value:testValue 作为方法的参数）：

App.SomeView = Em.View.extend({
  attributeBindings: ['value:testValue']
});

App.ModalView = App.SomeView.extend({
  attributeBindings: ['role'],
  testValue: 'hello', // Could be on either class
  role: 'dialog',

  removeBindings: function() {
    // role stays bound, value doesn't
    this.get('attributeBindings').removeObject('value:testValue');
  }.on('init')
});

再说一遍，here is a working JS Bin。

【讨论】：

我认为这不会从SomeView 中删除'value:testValue' 绑定？
正确！这不会影响 App.SomeView 类，只会影响 App.ModalView 的任何实例。