Question

我在HTML / Knockout中使用以下示例向我的学生展示各种javascript数据绑定库之间的实现差异。我已经在Angular.js和Knockout.js中创建了一个。现在我需要将这个相同的页面转换为一个简单的Backbone.js示例。我只知道Knockout.js。我能够在20分钟内创建Angular.js示例，但是我无法找到将其转换为Backbone.js示例所需的帮助。

它所做的就是显示三个带有字符串的输入框，然后显示相同的字符串。当我更改输入框中的字符串时，它后面的文本也会更新 - 我输入：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Minimum Example</title>

        <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js"></script>

        <script>
            var items = [
                { "description": ko.observable("coffee pot") },
                { "description": ko.observable("nerf gun") },
                { "description": ko.observable("phone") }
            ];
        </script>
    </head>

    <body>
        <h1>KnockoutJS</h1>

        <div>
            <p>Stuff on my desk:</p>
            <ul data-bind="foreach: items">
                <li>
                    <input data-bind="value: description, valueUpdate: 'afterkeydown'" /><span data-bind="text: description" />
                </li>
            </ul>
        </div>

        <script>
            ko.applyBindings(items);
        </script>

    </body>
</html>

提前谢谢！

Answer 1

来自Backbone.js网站，

避免“双向数据绑定”。虽然它确实是一个漂亮的演示，并且适用于最基本的CRUD，但它在您的真实应用程序中并不是非常有用。有时您希望更新每个按键，有时是模糊，有时是在面板关闭时，有时候点击“保存”按钮。几乎在所有情况下，只需将表单序列化为JSON就更快更容易了

现在this article展示了如何使用骨干来获取和设置数据绑定，但缺点是它不像挖空和角度那样简单。

Answer 2

对于演示，这是一个想法（未经测试）。

型号：

var my_model = Backbone.Model.extend({
    initialize: function(){
          this.on('change', model_changed);
    },
    model_changed: function(m){
              // assuming the input box name is the same as attribute name
              var changed_key = _.keys(m.changed)[0];
              var changed_value = _.values(m.changed)[0]; // or just use get

              /* may need to additional logic for numbers */
              if($("#"+changed_key).val() != changed_value) {
                  $("#"+changed_key).val(changed_value);
              }
    }
});

查看：

var my_view = Backbone.View.extend({
    events: function(){
          "change input": "update_model",
    },
    initialize: function(){
          // init code
    },
    render: function(){
          // render code
    }
    update_model: function(e /* event */){
           this.model.set(e.currentTarget.name, $(e.currentTarget).val());
    }
});

在渲染视图并在输入元素中更新值后，将触发update_model，这将在模型中设置属性值。

如果模型是通过函数或控制台更新的，那么如果值不相同，它将更新表单上的输入。

我需要一个非常简单的Backbone.js示例 - 一对一的比较

2 个答案: