Backbone.js получает и устанавливает атрибут вложенного объекта

У меня простой вопрос о функциях получения и установки Backbone.js .

1) Как с помощью приведенного ниже кода я могу напрямую «получить» или «установить» obj1.myAttribute1?

Другой вопрос:

2) В модели, помимо объекта по умолчанию , где я могу / должен объявить другие атрибуты моей модели, чтобы к ним можно было получить доступ через методы get и 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 - просто расширите Backbone.DeepModel вместо Backbone.Model, и затем вы сможете использовать пути для получения / установки атрибутов вложенной модели. Он также поддерживает события изменений.

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

Решение Доменика будет работать, однако каждая новая модель 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.Model, который решает проблему.

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

Было бы легко сгенерировать список моделей автоматически при инициализации, но этого решения мне было достаточно.

Решение, предложенное Домеником, имеет ряд недостатков. Допустим, вы хотите прослушать событие «изменение». В этом случае метод инициализации не будет запущен, а ваше настраиваемое значение атрибута будет заменено объектом json с сервера. В своем проекте я столкнулся с этой проблемой. Мое решение переопределить метод набора модели:

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 вместо атрибутов вложенных объектов имеет смысл, как упоминал Доменик, в более простых случаях вы можете создать функцию установки в модели:

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 может вам помочь.