Backbone.js：避免视图→模型→查看双转换 [英] Backbone.js: avoid view→model→view double conversion

问题描述

我正在尝试构建

当我在左边编辑字段时应该更新右侧的值，反之亦然。

When I edit field on the left it should update the one on the right and vice-versa.

• 编辑输入字段中的值会导致文本光标跳转

• Editing a value in an input field causes the text cursor to jump at the end of it.

在华氏字段中键入2将被替换为1.999999999999，如截图所示。这是因为双重转换：

视图的Fº→模型的Cº→视图的Fº。

Typing "2" in the fahrenheit field gets replaced with 1.999999999999, as you can see on the screenshot. This happens because of the double conversion:
view’s Fº → model’s Cº → view’s Fº.

如何避免这种情况？

更新：

我想知道在诸如Backbone.js之类的MVC框架中处理双向绑定的优雅方式。

I want to know the elegant way of dealing with two-way bindings in MVC frameworks such as Backbone.js.

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

No 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错误。

Not only it fixes the problem, it’s also reduces the code 3.5⨉. Clearly I’m doing MVC wrong.

推荐答案

而是在交互式视图中呈现每个变化的整个视图，使用视图的jQuery或纯JS上下文，就像您的非MVC示例。

Here's my take on this; instead rendering the whole view on every change, in interactive views, use the view's jQuery or plain JS contexts just like your non-MVC example.

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

由于Backbone文档说：

As the Backbone docs say:

双向数据 - 绑定。虽然它肯定会使一个漂亮的演示，并且适用于最基本的CRUD，但它在实际应用中并不是非常有用的。有时您想要更新每个按键，有时在模糊，有时当面板关闭时，有时当保存按钮被点击。

"Two way data-binding" is avoided. While it certainly makes for a nifty demo, and works for the most basic CRUD, it doesn't tend to be terribly useful in your real-world app. Sometimes you want to update on every keypress, sometimes on blur, sometimes when the panel is closed, and sometimes when the "save" button is clicked.

这篇关于Backbone.js：避免视图→模型→查看双转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！