javascript - 恩伯斯 : Two-Way Data-binding between Number Inputs

Question

我正在查看 Ember 中的数据绑定(bind)，我想绑定(bind)两个 input type="number" 元素，以便更改其中一个元素会更新另一个元素。 Here is the JSBin .

我想要的是以下内容:

Biker = DS.Model.extend(
    bikes: (->
        @get("tires") / 2
    ).property("tires")
    tires: (->
        @get("bikes") * 2
    ).property("bikes")
)

但这会导致如下堆栈溢出:

Uncaught RangeError: Maximum call stack size exceeded ember.js:1 Ember.assert ember.js:1 get ember.js:2167 Ember.Observable.Ember.Mixin.create.get ember.js:12425 (anonymous function) biker.js:32 ComputedPropertyPrototype.get ember.js:4951 get ember.js:2176 Ember.Observable.Ember.Mixin.create.get ember.js:12425 (anonymous function) biker.js:29 ComputedPropertyPrototype.get

用 input 元素实现双向绝对数据绑定(bind)的最佳方法是什么？

备注:I asked something similar, but about angular .

Answer 1

与其编写循环代码，不如让其中一个属性监视另一个属性。 Ember's computed properties允许您为此目的定义 setter 和 getter 函数:

App.Biker = DS.Model.extend({
  bikes: DS.attr('number'),
  tires: function(key, value) {
    // Setter
    // Says: if we did this.set('tires', something);
    if (arguments.length > 1) {
      var bikes = value != 0 ? value / 2 : 0; // Incase zero bikes
      this.set('bikes',  bikes);
    }

    // Getter
    return this.get('bikes') * 2;
  }.property('bikes')
})