backbone.js模型指向嵌套模型的同一实例

Question

backbone.js模型指向嵌套模型的同一实例

for*_*ice 7 javascript model-view-controller backbone.js

使用backbone.js,这是一个快速测试,以演示我面对嵌套模型的问题.

前言我有一个Obj模型,它包含2个嵌套模型,Obj1和Obj2.Obj模型本身有一个View(ObjView),主页面本身有一个View(BodyView).

主页面有一个按钮,id = add.每次单击该按钮时,都会向ObjCollection添加一个新的Obj,并且ObjView会向该页面添加一个按钮(id = clickMe).clickMe按钮绑定到一个testFunc,即console.logs this.model和this.model.get("obj1").

问题从检查console.logs,我看到虽然每个Obj都是一个新实例,但它们的嵌套Obj1指向obj1的同一个实例!但Obj的每个实例显然应该有自己的嵌套模型obj1和obj2的实例.

任何帮助赞赏.

$(document).ready(function(){

    var Obj1 = Backbone.Model.extend({
        defaults:{
            Attr1A   : false,
            Attr1B   : false
        }
    })

    var Obj2 = Backbone.Model.extend({
        defaults:{
            Attr2A   : false,
            Attr2B   : false
        }
    })

    var Obj = Backbone.Model.extend({
        defaults: {
            obj1    : new Obj1(),
            obj2    : new Obj2()
        }
    })

    var ObjCollection = Backbone.Collection.extend({
        model: Obj
    });


    var ObjView = Backbone.View.extend({

        initialize: function(){
            _.bindAll(this, 'render', 'testFunc');
            this.model.bind('change', this.render);
            this.model.view = this;

            $("body").append(this.render().el);
        },

        events: {
            "click #clickMe" : "testFunc"
        },

        render: function(){
            $(this.el).html('<input type ="button" id="clickMe" value="Click">')
            return this;
        },

        testFunc: function(){
            console.log(this.model); //returns Obj models with unique cids
            console.log(this.model.get("obj1")); //returns Obj1 models with the SAME cid!
        }
    });


    var BodyView = Backbone.View.extend({
        el: $('body'),

        events:{
            "click #add"  : "addObj"
        },

        initialize: function(){
            _.bindAll(this, 'render', 'addObj')
            this.collection = new ObjCollection();
            this.collection.bind('add', this.appendObj); 
        },

        addObj: function(){
            var myObj = new Obj();
            this.collection.add(myObj);
        },

        appendObj: function(myObj){
            var objView = new ObjView({
                model: myObj
            });
        }
    });
    var bodyView = new BodyView;

});

Run Code Online (Sandbox Code Playgroud)

html页面只是以下jQuery和骨干加载.

<body>
    <input type ="button" id="add" value="Add">
</body>

Run Code Online (Sandbox Code Playgroud)

Answer 1

c3r*_*rin 5

fortuneRice,当一个Backbone模型初始化时,super.constructor将默认值移动到内部属性数组,其中model.get查找"obj1".Prusse的示例使用每个实例的新对象初始化obj1和obj2值,但不将值移动到内部属性数组.这是我对Prusse解决方案的修改.

var Obj = Backbone.Model.extend({
    initialize: function() {
        myDefaults = {
            obj1: new Obj1();
            obj2: new Obj2();
        }
        this.set(myDefaults);
});

Run Code Online (Sandbox Code Playgroud)

jQuery的extend方法将两个对象组合在一起.您可以在initialize方法中使用默认值声明非对象引用,并使用myDefaults声明对象引用.

归档时间：	14 年，5 月前
查看次数：	2465 次
最近记录：	14 年，4 月前