Backbone - 带有模型绑定器的嵌套模型答案

【问题标题】：Backbone - Nested Model with Model BinderBackbone - 带有模型绑定器的嵌套模型
【发布时间】：2013-09-04 21:19:43
【问题描述】：

ModelBinder 似乎不能与嵌套模型（骨干嵌套项目）一起使用。模型的更改不会传播到嵌套元素。更改输入值时，跨度值不会改变。 .如果将 NestedModel 替换为 DeepModel 它可以工作。同样，如果 person.name 被删除并且 Model 只有一个级别（lastName 和 firstName），则 NestedModel 也可以工作。

    <script type='text/coffeescript'>
        $ ->
            class MyModel extends Backbone.NestedModel
                defaults:
                    person:
                        name :
                            firstName: 'Bob'
                            lastName: 'Sass' 

            window.model = new MyModel

            FormView = Backbone.View.extend
                initialize: ->
                    @modelBinder = new Backbone.ModelBinder();
                    @modelBinder.bind(@model,@el)
                el: '#frm'

            view = new FormView model: model

    </script>


<body>
    <form method="post" action="/test" id='frm'>
        <div id="welcome"> Welcome, <span id='person.name.firstName'></span> <span id='person.name.lastName'></span>
        <br><br>
        Edit your information:
            <input type="text" name="person.name.firstName" value="zz"/>
            <input type="text" name="person.name.lastName" value="nn"/></div>
    </form>

【问题讨论】：

标签： backbone.js coffeescript

【解决方案1】：

我遇到了同样的问题。我发现将 Backbone.ModelBinder 与 backbone-associations 结合使用取得了成功。它允许我将 ModelBinder 与我的嵌套模型一起使用并完成您所描述的内容。

我采用了您发布的示例，并使用您的示例创建了一个小提琴Using Backbone.ModelBinder with backbone-associations。检查一下，看看它是否回答了你的问题。

JavaScript 最终看起来像这样：

    var Name = Backbone.AssociatedModel.extend({
        defaults: { 'firstName': '', 'lastName': '' }
    }); 

    var Person = Backbone.AssociatedModel.extend({
        defaults: { 'name': null }, 

        // create a relation for our nested model  
        relations: [{
            'type': Backbone.One,
            'key': 'name',
            'relatedModel': Name
        }]
    });

    var MyModel = Backbone.AssociatedModel.extend({
        defaults: { 'person': null }, 

        // create a relation for our nested model
        relations: [{
            'type': Backbone.One,
            'key': 'person',
            'relatedModel': Person
        }]
    });

    var FormView = Backbone.View.extend({   
        el: '#frm', 

        initialize: function() {
            this._modelBinder = new Backbone.ModelBinder(); 
        }, 

        render: function() {

            var bindingsHash = {
                'person.name.firstName': [
                    { 'selector': '#firstName' },
                    { 'selector': '[name=firstName]' }
                ],
                'person.name.lastName': [
                    { 'selector': '#lastName' },
                    { 'selector': '[name=lastName]' }
                ]
            }; 

            this._modelBinder.bind(this.model, this.el, bindingsHash);   
        }, 

        close: function() {
            this._modelBinder.unbind();    
        }
    });

    // create the model     
    var modelInfo = new MyModel({
        'person': {
            'name': {
                'firstName': 'Bob',
                'lastName': 'Sass'
            }
        }
    }); 

    // create the view and render 
    var view = new FormView({ model: modelInfo }); 
    view.render();

【讨论】：