Backbone.js รับและตั้งค่าแอตทริบิวต์วัตถุที่ซ้อนกัน

ฉันมีคำถามง่ายๆเกี่ยวกับฟังก์ชันรับและตั้งค่า Backbone.js

1) ด้วยรหัสด้านล่างฉันจะ 'get' หรือ 'set' obj1.myAttribute1 โดยตรงได้อย่างไร?

คำถามอื่น:

2) ในโมเดลนอกเหนือจากอ็อบเจ็กต์ค่าเริ่มต้นฉันจะ / ควรประกาศคุณลักษณะอื่น ๆ ของโมเดลของฉันได้ที่ไหนเพื่อให้สามารถเข้าถึงได้ผ่านเมธอด get and set ของ Backbone

var MyModel = Backbone.Model.extend({
    defaults: {
        obj1 : {
            "myAttribute1" : false,
            "myAttribute2" : true,
        }
    }
})

var MyView = Backbone.View.extend({
    myFunc: function(){
        console.log(this.model.get("obj1"));
        //returns the obj1 object
        //but how do I get obj1.myAttribute1 directly so that it returns false?
    }
});

ฉันรู้ว่าฉันทำได้:

this.model.get("obj1").myAttribute1;

แต่เป็นการปฏิบัติที่ดีหรือไม่?

แม้ว่าthis.model.get("obj1").myAttribute1จะเป็นเรื่องปกติ แต่ก็เป็นปัญหาเล็กน้อยเพราะคุณอาจถูกล่อลวงให้ทำสิ่งเดียวกันกับเซ็ตเช่น

this.model.get("obj1").myAttribute1 = true;

แต่ถ้าคุณทำเช่นนี้คุณจะไม่ได้รับประโยชน์จากโมเดล Backbone สำหรับmyAttribute1เช่นเหตุการณ์การเปลี่ยนแปลงหรือการตรวจสอบความถูกต้อง

ทางออกที่ดีกว่าคืออย่าซ้อน POJSO ("วัตถุ JavaScript เก่าธรรมดา") ในโมเดลของคุณและแทนที่จะซ้อนคลาสโมเดลที่กำหนดเอง มันจะมีลักษณะดังนี้:

var Obj = Backbone.Model.extend({
    defaults: {
        myAttribute1: false,
        myAttribute2: true
    }
});

var MyModel = Backbone.Model.extend({
    initialize: function () {
        this.set("obj1", new Obj());
    }
});

จากนั้นรหัสการเข้าถึงจะเป็น

var x = this.model.get("obj1").get("myAttribute1");

แต่ที่สำคัญกว่านั้นคือรหัสการตั้งค่าจะเป็น

this.model.get("obj1").set({ myAttribute1: true });

ซึ่งจะเริ่มเหตุการณ์การเปลี่ยนแปลงที่เหมาะสมและไม่ชอบ ตัวอย่างการทำงานที่นี่: http://jsfiddle.net/g3U7j/

ฉันสร้างbackbone-deep-modelสำหรับสิ่งนี้ - เพียงแค่ขยาย Backbone.DeepModel แทน Backbone.Model จากนั้นคุณสามารถใช้พา ธ เพื่อรับ / ตั้งค่าแอตทริบิวต์โมเดลที่ซ้อนกันได้ มันรักษาเหตุการณ์การเปลี่ยนแปลงด้วย

model.bind('change:user.name.first', function(){...});
model.set({'user.name.first': 'Eric'});
model.get('user.name.first'); //Eric

โซลูชันของ Domenic จะใช้งานได้อย่างไรก็ตาม MyModel ใหม่แต่ละตัวจะชี้ไปที่อินสแตนซ์เดียวกันของ Obj เพื่อหลีกเลี่ยงปัญหานี้ MyModel ควรมีลักษณะดังนี้:

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

ดูคำตอบของ c3rin ที่https://stackoverflow.com/a/6364480/1072653สำหรับคำอธิบายแบบเต็ม

ฉันใช้แนวทางนี้

หากคุณมีโมเดล Backbone เช่นนี้:

var nestedAttrModel = new Backbone.Model({
    a: {b: 1, c: 2}
});

คุณสามารถตั้งค่าแอตทริบิวต์ "ab" ด้วย:

var _a = _.omit(nestedAttrModel.get('a')); // from underscore.js
_a.b = 3;
nestedAttrModel.set('a', _a);

ตอนนี้โมเดลของคุณจะมีคุณสมบัติเช่น:

{a: {b: 3, c: 2}}

เมื่อเหตุการณ์ "เปลี่ยนแปลง" เริ่มทำงาน

มีวิธีแก้ปัญหาหนึ่งที่ยังไม่มีใครนึกถึงซึ่งมีให้ใช้มากมาย คุณไม่สามารถตั้งค่าแอตทริบิวต์ที่ซ้อนกันได้โดยตรงเว้นแต่คุณจะใช้ไลบรารีของบุคคลที่สามซึ่งคุณอาจไม่ต้องการ อย่างไรก็ตามสิ่งที่คุณทำได้คือสร้างโคลนของพจนานุกรมต้นฉบับตั้งค่าคุณสมบัติที่ซ้อนกันที่นั่นและตั้งค่าพจนานุกรมทั้งหมดนั้น ชิ้นเค้ก

//How model.obj1 looks like
obj1: {
    myAttribute1: false,
    myAttribute2: true,
    anotherNestedDict: {
        myAttribute3: false
    }
}

//Make a clone of it
var cloneOfObject1 = JSON.parse(JSON.stringify(this.model.get('obj1')));

//Let's day we want to change myAttribute1 to false and myAttribute3 to true
cloneOfObject1.myAttribute2 = false;
cloneOfObject1.anotherNestedDict.myAttribute3 = true;

//And now we set the whole dictionary
this.model.set('obj1', cloneOfObject1);

//Job done, happy birthday

ฉันมีปัญหาเดียวกันกับ @pagewil และ @Benno กับวิธีแก้ปัญหาของ @Domenic คำตอบของฉันคือเขียน Backbone คลาสย่อยอย่างง่ายแทนโมเดลที่แก้ไขปัญหา

// Special model implementation that allows you to easily nest Backbone models as properties.
Backbone.NestedModel = Backbone.Model.extend({
    // Define Backbone models that are present in properties
    // Expected Format:
    // [{key: 'courses', model: Course}]
    models: [],

    set: function(key, value, options) {
        var attrs, attr, val;

        if (_.isObject(key) || key == null) {
            attrs = key;
            options = value;
        } else {
            attrs = {};
            attrs[key] = value;
        }

        _.each(this.models, function(item){
            if (_.isObject(attrs[item.key])) {
                attrs[item.key] = new item.model(attrs[item.key]);
            }
        },this);

        return Backbone.Model.prototype.set.call(this, attrs, options);
    }
});

var Obj = Backbone.Model.extend({
    defaults: {
        myAttribute1: false,
        myAttribute2: true
    }
});

var MyModel = Backbone.NestedModel.extend({
    defaults: {
        obj1: new Obj()
    },

    models: [{key: 'obj1', model: Obj}]
});

สิ่งที่ NestedModel ทำเพื่อคุณคืออนุญาตให้สิ่งเหล่านี้ทำงานได้ (ซึ่งจะเกิดขึ้นเมื่อ myModel ได้รับการตั้งค่าผ่านข้อมูล JSON):

var myModel = new MyModel();
myModel.set({ obj1: { myAttribute1: 'abc', myAttribute2: 'xyz' } });
myModel.set('obj1', { myAttribute1: 123, myAttribute2: 456 });

การสร้างรายการแบบจำลองโดยอัตโนมัติในการเริ่มต้นจะเป็นเรื่องง่าย แต่โซลูชันนี้ดีพอสำหรับฉัน

โซลูชันที่เสนอโดย Domenic มีข้อบกพร่องบางประการ สมมติว่าคุณต้องการฟังเหตุการณ์ "เปลี่ยนแปลง" ในกรณีนั้นเมธอด 'initialize' จะไม่ถูกเริ่มทำงานและค่าที่กำหนดเองสำหรับแอตทริบิวต์ของคุณจะถูกแทนที่ด้วยวัตถุ json จากเซิร์ฟเวอร์ ในโครงการของฉันฉันประสบกับปัญหานี้ วิธีแก้ปัญหาของฉันในการแทนที่วิธีการ 'set' ของ Model:

set: function(key, val, options) {
    if (typeof key === 'object') {
        var attrs = key;
        attrs.content = new module.BaseItem(attrs.content || {});
        attrs.children = new module.MenuItems(attrs.children || []);
    }

    return Backbone.Model.prototype.set.call(this, key, val, options);
}, 

ในขณะที่ในบางกรณีการใช้แบบจำลอง Backbone แทนแอตทริบิวต์ Object ที่ซ้อนกันก็สมเหตุสมผลตามที่ Domenic กล่าวไว้ในกรณีที่ง่ายกว่าคุณสามารถสร้างฟังก์ชัน setter ในโมเดล:

var MyModel = Backbone.Model.extend({
    defaults: {
        obj1 : {
            "myAttribute1" : false,
            "myAttribute2" : true,
        }
    },
    setObj1Attribute: function(name, value) {
        var obj1 = this.get('obj1');
        obj1[name] = value;
        this.set('obj1', obj1);
    }
})

หากคุณโต้ตอบกับแบ็กเอนด์ซึ่งต้องใช้วัตถุที่มีโครงสร้างซ้อนกัน แต่มีกระดูกสันหลังที่ง่ายกว่าในการทำงานกับโครงสร้างเชิงเส้น

backbone.linearสามารถช่วยคุณได้