Question

我有两个输入，一个输入数英里，另一个输入数公里。我在每个输入中使用一个keyup事件来触发另一个输入中的计算。因此，如果我在千米输入中键入5，则里程输入的值将自动更新为3.1068。

里程输入绑定到模型上的miles属性，但里程字段的程序更新不会触发绑定属性进行更新。我如何使这项工作？

（另外：我只对计算和显示用途的千米输入值感兴趣。它不需要是一个属性。）

以下是输入视图：

App.MilesInput = Ember.TextField.extend({
    elementId: 'miles-input',
    focusIn: function() {
        this.set('value', '');
    },
    keyUp: function() {
        var miles = $('#miles-input').val();

        $('#kilometers-input').val(miles * 1.609344);
    }
});

App.KilometersInput = Ember.TextField.extend({
    elementId: 'kilometers-input',
    focusIn: function() {
        this.set('value', '');
    },
    keyUp: function() {
        var kilometers = $('#kilometers-input').val();

        $('#miles-input').val(kilometers * 0.621371192);
    }
});

及其相应的模板元素：

<div>
    {{view App.MilesInput value=miles type="number"}}
    <label>Mi</label>

    {{view App.KilometersInput type="number"}}
    <label>K</label>
</div>

谢谢！

Answer 1

使用计算属性并为

指定相同的计算属性

 App.IndexController = Ember.Controller.extend({
   miles:'',
   kilometers: function(){
    return this.get('miles') *0.621371192;
  }.property('miles')
 });

在您的模板中

   {{input value=miles}}
   {{input value=kilometers}}

据我所知，你不需要自定义的viewElement。

我建议你读这个 http://emberjs.com/guides/object-model/computed-properties/

这是一个JSBin http://emberjs.jsbin.com/kitus/1/

告诉我这是否适合你

Answer 2

App.IndexController = Ember.Controller.extend({
 miles:'',
 kilometers:'',
  calcK: function (){
    this.set('kilometers',this.get('miles')*0.621371192)
  }.observes('miles'),
  calcM: function (){
 this.set('miles',this.get('kilometers')/0.621371192)
}.observes('kilometers')
 });

jsbin

http://emberjs.jsbin.com/yopew/2/edit

Answer 3

当存在相互依赖的属性时，您需要暂时禁用观察者以停止反馈循环。关于这方面的文档很少，但是我使用了这种方法并且确实有效。

下面的代码禁用并重新启用相反观察者的属性设置：

App.IndexController = Ember.Controller.extend({
  miles:'',
  kilometers:'',
  calcK: function (obj,key){
    Ember._suspendObserver(this, 'kilometers', null, 'calcM', function() {
      obj.set('kilometers', obj.get('miles')*0.621371192);
    });
  }.observes('miles'),
  calcM: function (obj,key){
    Ember._suspendObserver(this, 'miles', null, 'calcK', function() {
      obj.set('miles', obj.get('kilometers')/0.621371192)
    });
  }.observes('kilometers')
});

由于上述代码避免了反馈循环，因此用户输入的输入字段不会更新，输入也不会受到影响。

这是一个有效的JSBin http://emberjs.jsbin.com/boqos/1/

Ember：在文本字段上设置属性值

3 个答案: