8

我正在尝试构建这个：
在此处输入图像描述

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

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

  • 如屏幕截图所示，在华氏温度字段中键入“2”将被替换为 1.999999999999。发生这种情况是因为双重转换：
    视图的 Fº → 模型的 Cº → 视图的 Fº。

畏缩

我怎样才能避免这种情况？

更新：

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

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。

4

3 回答 3

5

这是我对此的看法；而是在每次更改时渲染整个视图，在交互式视图中，使用视图的 jQuery 或纯 JS 上下文，就像您的非 MVC 示例一样。

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

正如 Backbone 文档所说：

避免了“双向数据绑定”。虽然它确实是一个漂亮的演示，并且适用于最基本的 CRUD，但它在您的实际应用程序中往往不是非常有用。有时您想在每次按键时更新，有时在模糊时，有时在面板关闭时，有时在单击“保存”按钮时。

于 2014-06-13T09:54:01.073 回答
1

想到了两种方法。正如 Kinakuta 提到的，您可以执行以下操作，这样您就可以对整数而不是小数进行数学运算：

temp = ((oldTemp * 100) * conversion stuff) / 100

根据您希望应用程序的复杂程度，您还可以使用类似Backbone.ModelBinder. 它会自动将您的视图绑定到您的模型，因此当一个更新时，另一个会自动更新。然后，您可以将转换器函数附加到绑定，以便当您的值消失view -> model或model -> view通过转换器运行时。如果您对这个想法感兴趣，我可以详细说明。

更新：使用简单的临时转换器，Backbone 需要 3.5 倍的代码也就不足为奇了。MVC 框架可以减少大型项目中的臃肿，但对于小型应用程序来说，这可能是矫枉过正。例如，想象一下使用 Backbone 来显示“Hello World”。

至于您的问题，仅在更改一个输入值时才渲染另一个输入值，而不是两者？如果 F 输入发生变化，则重新渲染 C 框中的值。我会通过ModelBinder在我的模型中有两个属性来做到这一点：tempF和tempC. 当一个被修改时，我重新计算另一个，ModelBinder 会自动显示它。或者您可以不使用 MB，只听更改事件。

于 2013-04-05T02:53:00.453 回答
0

在您保存开始转换的输入字段的视图级别设置一个变量，因此您不会在该字段上调用转换函数。

于 2013-04-05T02:46:46.703 回答