Backbone.js:避免查看→模型→查看双重转换

Question

我正在努力建立这个:

当我在左侧编辑字段时,它应该更新右边的字段,反之亦然.

• 在输入字段中编辑值会导致文本光标在其末尾跳转.

• 在华氏温度字段中键入"2"将替换为1.999999999999,如屏幕截图所示.这是因为双重转换:
  视图的Fº→模型的Cº→视图的Fº.

我怎么能避免这种情况？

---

更新:

我想知道在Backbone.js等MVC框架中处理双向绑定的优雅方式.

MVC

var Temperature = Backbone.Model.extend({
    defaults: {
        celsius: 0
    },
    fahrenheit: function(value) {
        if (typeof value == 'undefined') {
            return this.c2f(this.get('celsius'));
        }
        value = parseFloat(value);
        this.set('celsius', this.f2c(value));
    },
    c2f: function(c) {
        return 9/5 * c + 32;
    },
    f2c: function(f) {
        return 5/9 * (f - 32);
    }
});


var TemperatureView = Backbone.View.extend({
    el: document.body,
    model: new Temperature(),
    events: {
        "input #celsius": "updateCelsius",
        "input #fahrenheit": "updateFahrenheit"
    },
    initialize: function() {
        this.listenTo(this.model, 'change:celsius', this.render);
        this.render();
    },
    render: function() {
        this.$('#celsius').val(this.model.get('celsius'));
        this.$('#fahrenheit').val(this.model.fahrenheit());
    },
    updateCelsius: function(event) {
        this.model.set('celsius', event.target.value);
    },
    updateFahrenheit: function(event) {
        this.model.fahrenheit(event.target.value);
    }
});

var temperatureView = new TemperatureView();

没有MVC

celsius.oninput = function(e) {
    fahrenheit.value = c2f(e.target.value)
}
fahrenheit.oninput = function(e) {
    celsius.value = f2c(e.target.value)
}
function c2f(c) {
    return 9/5 * parseFloat(c) + 32;
}
function f2c(f) {
    return 5/9 * (f - 32);
}

它不仅解决了问题,还减少了代码3.5⨉.显然我做的MVC错了.

Answer 1

这是我对此的看法; 而是在交互式视图中呈现每个更改的整个视图,使用视图的jQuery或普通JS上下文,就像非MVC示例一样.

http://jsbin.com/fomugixe/1/edit

正如Backbone文档所说:

避免了"双向数据绑定".虽然它确实是一个漂亮的演示,并适用于最基本的CRUD,但它在你的真实世界的应用程序中往往不是非常有用.有时您希望更新每个按键,有时是模糊,有时是面板关闭时,有时候点击"保存"按钮.