Question

ModelBinder似乎不能与嵌套模型（骨干嵌套项目）一起工作。模型的变化不会传播到嵌套元素。更改输入值时，span值不会改变。。如果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>

Answer 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();

Backbone - 带模型Binder的嵌套模型

1 个答案: