Backbone.js lấy và đặt thuộc tính đối tượng lồng nhau

Tôi có một câu hỏi đơn giản về các hàm get và set của Backbone.js .

1) Với đoạn mã dưới đây, làm cách nào để tôi có thể 'lấy' hoặc 'đặt' obj1.myAttribute1 trực tiếp?

Câu hỏi khác:

2) Trong Mô hình, ngoài đối tượng mặc định , tôi có thể / nên khai báo các thuộc tính khác của mô hình ở đâu, sao cho chúng có thể được truy cập thông qua các phương thức get và set của 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?
    }
});

Tôi biết tôi có thể làm:

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

nhưng đó có phải là thực hành tốt?

Mặc dù this.model.get("obj1").myAttribute1ổn, nhưng nó có một chút vấn đề vì sau đó bạn có thể bị cám dỗ để làm cùng một loại điều cho bộ, tức là

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

Nhưng nếu bạn làm điều này, bạn sẽ không nhận được những lợi ích của các mô hình Backbone myAttribute1, chẳng hạn như các sự kiện thay đổi hoặc xác thực.

Một giải pháp tốt hơn là không bao giờ lồng các POJSO ("các đối tượng JavaScript cũ thuần túy") trong các mô hình của bạn và thay vào đó lồng các lớp mô hình tùy chỉnh. Vì vậy, nó sẽ trông giống như sau:

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

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

Sau đó, mã truy cập sẽ là

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

nhưng quan trọng hơn, mã cài đặt sẽ là

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

sẽ kích hoạt các sự kiện thay đổi thích hợp và những thứ tương tự. Ví dụ làm việc tại đây: http://jsfiddle.net/g3U7j/

Tôi đã tạo backbone-deep-model cho việc này - chỉ cần mở rộng Backbone.DeepModel thay vì Backbone.Model và sau đó bạn có thể sử dụng các đường dẫn để lấy / đặt các thuộc tính mô hình lồng nhau. Nó cũng duy trì các sự kiện thay đổi.

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

Giải pháp của Domenic sẽ hoạt động tuy nhiên mỗi MyModel mới sẽ trỏ đến cùng một phiên bản của Obj. Để tránh điều này, MyModel sẽ giống như sau:

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

Xem câu trả lời của c3rin @ https://stackoverflow.com/a/6364480/1072653 để được giải thích đầy đủ.

Tôi sử dụng cách tiếp cận này.

Nếu bạn có một mô hình Backbone như thế này:

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

Bạn có thể đặt thuộc tính "ab" bằng:

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

Bây giờ mô hình của bạn sẽ có các thuộc tính như:

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

với sự kiện "thay đổi" được kích hoạt.

Có một giải pháp mà chưa ai nghĩ đến là rất nhiều để sử dụng. Bạn thực sự không thể đặt các thuộc tính lồng nhau một cách trực tiếp, trừ khi bạn sử dụng thư viện của bên thứ ba mà bạn có thể không muốn. Tuy nhiên, những gì bạn có thể làm là tạo một bản sao của từ điển gốc, đặt thuộc tính lồng nhau ở đó và hơn là đặt toàn bộ từ điển đó. Miếng bánh.

//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

Tôi đã gặp vấn đề tương tự @pagewil và @Benno với giải pháp của @ Domenic. Thay vào đó, câu trả lời của tôi là viết một lớp con đơn giản của Backbone.Model để khắc phục sự cố.

// 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}]
});

Những gì NestedModel làm cho bạn là cho phép những thứ này hoạt động (đó là điều xảy ra khi myModel được thiết lập thông qua dữ liệu JSON):

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

Sẽ rất dễ dàng để tạo danh sách mô hình tự động khi khởi tạo, nhưng giải pháp này đủ tốt đối với tôi.

Giải pháp do Domenic đề xuất có một số hạn chế. Giả sử bạn muốn nghe sự kiện 'thay đổi'. Trong trường hợp đó, phương thức 'khởi tạo' sẽ không được kích hoạt và giá trị tùy chỉnh của bạn cho thuộc tính sẽ được thay thế bằng đối tượng json từ máy chủ. Trong dự án của tôi, tôi phải đối mặt với vấn đề này. Giải pháp của tôi để ghi đè phương thức 'set' của 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);
}, 

Mặc dù trong một số trường hợp sử dụng các mô hình Backbone thay vì các thuộc tính Đối tượng lồng nhau có ý nghĩa như Domenic đã đề cập, trong những trường hợp đơn giản hơn, bạn có thể tạo một hàm setter trong mô hình:

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);
    }
})

Nếu bạn tương tác với phần phụ trợ, yêu cầu đối tượng có cấu trúc lồng nhau. Nhưng với đường trục dễ làm việc hơn với cấu trúc tuyến tính.

backbone.linear có thể giúp bạn.