blocks|key|2958754|text|虽然this.model.get("obj1").myAttribute1很好，但它有点问题，因为这样您可能会尝试为set做相同类型的事情，例如|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2958755|this.model.get("obj1").myAttribute1+=+true;|code-block|syntax|javascript|2958756|但是，如果您这样做，您将无法获得myAttribute1主干模型的好处，如更改事件或验证。|2958757|一个更好的解决方案是永远不要在模型中嵌套POJSO(“普通的旧JavaScript对象”)，而是嵌套自定义模型类。所以它看起来像这样：|2958758|var+Obj+=+Backbone.Model.extend({
++++defaults:+{
++++++++myAttribute1:+false,
++++++++myAttribute2:+true
++++}
});

var+MyModel+=+Backbone.Model.extend({
++++initialize:+function+()+{
++++++++this.set("obj1",+new+Obj());
++++}
});|2958759|则访问代码将为|2958760|var+x+=+this.model.get("obj1").get("myAttribute1");|2958761|但更重要的是，设置代码应该是|2958762|this.model.get("obj1").set({+myAttribute1:+true+});|2958763|其将触发适当的改变事件等。此处的工作示例：http://jsfiddle.net/g3U7j/|2958764|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/g3U7j/^0|2|Z|0|0|G|C|0|0|0|0|0|0|0|L|Q|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1B|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1C|8|@$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|1F|8|@]|D|@]|E|$]]|$1|O|3|P|5|H|7|1G|8|@]|D|@]|E|$I|J]]|$1|Q|3|R|5|6|7|1H|8|@]|D|@]|E|$]]|$1|S|3|T|5|H|7|1I|8|@]|D|@]|E|$I|J]]|$1|U|3|V|5|6|7|1J|8|@]|D|@]|E|$]]|$1|W|3|X|5|H|7|1K|8|@]|D|@]|E|$I|J]]|$1|Y|3|Z|5|6|7|1L|8|@]|D|@$9|1M|A|1N|1|1O]]|E|$]]|$1|10|3|-4|5|6|7|1P|8|@]|D|@]|E|$]]]|11|$12|$5|13|14|15|E|$16|17]]]]

While <code>this.model.get("obj1").myAttribute1</code> is fine, it's a bit problematic because then you might be tempted to do the same type of thing for set, i.e.

<pre><code>this.model.get("obj1").myAttribute1 = true;
</code></pre>

But if you do this, you won't get the benefits of Backbone models for <code>myAttribute1</code>, like change events or validation.

A better solution would be to never nest POJSOs ("plain old JavaScript objects") in your models, and instead nest custom model classes. So it would look something like this:

<pre class="lang-js prettyprint-override"><code>var Obj = Backbone.Model.extend({
 defaults: {
 myAttribute1: false,
 myAttribute2: true
 }
});

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

Then the accessing code would be

<pre><code>var x = this.model.get("obj1").get("myAttribute1");
</code></pre>

but more importantly the setting code would be 

<pre><code>this.model.get("obj1").set({ myAttribute1: true });
</code></pre>

which will fire appropriate change events and the like. Working example here: <a href="http://jsfiddle.net/g3U7j/" rel="noreferrer">http://jsfiddle.net/g3U7j/</a>

blocks|key|262666|text|我为此创建了backbone-deep-model+-只需扩展Backbone.DeepModel而不是Backbone.Model，然后您就可以使用路径来获取/设置嵌套模型属性。它还维护更改事件。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|262667|model.bind('change:user.name.first',+function(){...});
model.set({'user.name.first':+'Eric'});
model.get('user.name.first');+//Eric|code-block|syntax|javascript|262668|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/powmedia/backbone-deep-model^0|6|J|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

I created <a href="https://github.com/powmedia/backbone-deep-model" rel="noreferrer">backbone-deep-model</a> for this - just extend Backbone.DeepModel instead of Backbone.Model and you can then use paths to get/set nested model attributes. It maintains change events too.

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

blocks|key|268054|text|多梅尼克的解决方案将会起作用，但是每个新的MyModel都将指向相同的Obj实例。为了避免这种情况，MyModel应该看起来像这样：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|268055|var+MyModel+=+Backbone.Model.extend({
++initialize:+function()+{
+++++myDefaults+=+{
+++++++obj1:+new+Obj()
+++++}+
+++++this.set(myDefaults);
++}
});|code-block|syntax|javascript|268056|有关完整的解释，请参阅c3ring的答案@+https://stackoverflow.com/a/6364480/1072653。|offset|length|268057|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/6364480/1072653^0|0|0|M|17|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Domenic's solution will work however each new MyModel will point to the same instance of Obj. 
To avoid this, MyModel should look like: 

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

See c3rin's answer @ <a href="https://stackoverflow.com/a/6364480/1072653">https://stackoverflow.com/a/6364480/1072653</a> for a full explanation.

blocks|key|262693|text|我和@pagewil和@Benno在@Domenic的解决方案中遇到了同样的问题。我的答案是编写一个简单的Backbone.Model子类来解决这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|262694|//+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)+%7C%7C+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}]
});|code-block|syntax|javascript|262695|NestedModel为您做的就是允许它们工作(这就是通过myModel数据设置JSON时发生的事情)：|262696|var+myModel+=+new+MyModel();
myModel.set({+obj1:+{+myAttribute1:+'abc',+myAttribute2:+'xyz'+}+});
myModel.set('obj1',+{+myAttribute1:+123,+myAttribute2:+456+});|262697|在initialize中自动生成模型列表很容易，但这个解决方案对我来说已经足够好了。|262698|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I had the same problem @pagewil and @Benno had with @Domenic's solution. My answer was to instead write a simple sub-class of Backbone.Model that fixes the problem.

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

What NestedModel does for you is allow these to work (which is what happens when myModel gets set via JSON data):

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

It would be easy to generate the models list automatically in initialize, but this solution was good enough for me.

blocks|key|2958927|text|我使用这种方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2958928|如果你有一个像这样的主干模型：|2958929|var+nestedAttrModel+=+new+Backbone.Model({
++++a:+{b:+1,+c:+2}
});|code-block|syntax|javascript|2958930|您可以使用以下命令设置属性"a.b“：|2958931|var+_a+=+_.omit(nestedAttrModel.get('a'));+//+from+underscore.js
_a.b+=+3;
nestedAttrModel.set('a',+_a);|2958932|现在，您的模型将具有如下属性：|2958933|{a:+{b:+3,+c:+2}}|2958934|触发了"change“事件。|2958935|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

I use this approach.

If you have a Backbone model like this:

<pre><code>var nestedAttrModel = new Backbone.Model({
 a: {b: 1, c: 2}
});
</code></pre>

You can set the attribute "a.b" with:

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

Now your model will have attributes like:

<pre><code>{a: {b: 3, c: 2}}
</code></pre>

with the "change" event fired.

blocks|key|2958971|text|虽然在某些情况下使用主干模型而不是Domenic提到的嵌套对象属性是有意义的，但在更简单的情况下，您可以在模型中创建setter函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2958972|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);
++++}
})|code-block|syntax|javascript|2958973|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

While in some cases using Backbone models instead of nested Object attributes makes sense as Domenic mentioned, in simpler cases you could create a setter function in the model:

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

blocks|key|2958988|text|如果您与后端交互，则需要具有嵌套结构的对象。但是有了主干更容易与线性结构一起工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2958989|backbone.linear可以帮助您。|offset|length|2958990|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/darrrk/backbone.linear^0|0|0|F|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

If you interact with backend, which requires object with nesting structure.
But with backbone more easy to work with linear structure.

<a href="https://github.com/darrrk/backbone.linear" rel="nofollow">backbone.linear</a> can help you.

blocks|key|262778|text|Domenic提出的解决方案存在一些缺点。假设你想听“改变”事件。在这种情况下，'initialize‘方法将不会被激发，您的自定义属性值将替换为来自服务器的json对象。在我的项目中，我遇到了这个问题。我的解决方案是覆盖Model的'set‘方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|262779|set:+function(key,+val,+options)+{
++++if+(typeof+key+===+'object')+{
++++++++var+attrs+=+key;
++++++++attrs.content+=+new+module.BaseItem(attrs.content+%7C%7C+{});
++++++++attrs.children+=+new+module.MenuItems(attrs.children+%7C%7C+[]);
++++}

++++return+Backbone.Model.prototype.set.call(this,+key,+val,+options);
},+|code-block|syntax|javascript|262780|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Solution proposed by Domenic has some drawbacks. Say you want to listen to 'change' event. In that case 'initialize' method will not be fired and your custom value for attribute will be replaced with json object from server. In my project I faced with this problem. My solution to override 'set' method of Model:

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

blocks|key|268151|text|有一个解决方案还没有人想到，那就是有很多可用的。您确实不能直接设置嵌套属性，除非您使用可能不需要的第三方库。但是，您可以做的是克隆原始字典，在其中设置嵌套属性，然后设置整个字典。小菜一碟。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|268152|//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|code-block|syntax|javascript|268153|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

There is one solution nobody thought of yet which is lots to use. You indeed can't set nested attributes directly, unless you use a third party library which you probably don't want. However what you can do is make a clone of the original dictionary, set the nested property there and than set that whole dictionary. Piece of cake.

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

I have a simple question about Backbone.js' get and set functions.

1) With the code below, how can I 'get' or 'set' obj1.myAttribute1 directly?

Another question:

2) In the Model, aside from the defaults object, where can/should I declare my model's other attributes, such that they can be accessed via Backbone's get and set methods?

<pre class="lang-js prettyprint-override"><code>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?
 }
});
</code></pre>

I know I can do:

<pre class="lang-js prettyprint-override"><code>this.model.get("obj1").myAttribute1;
</code></pre>

but is that good practice?

Backbone.js get and set nested object attribute

服务器

JSON

关于Backbone.js的get和set函数，我有一个简单的问题。1)使用下面的代码，如何直接‘获取’或‘设置’obj1.myAttribute1？另一个问题：2)在模型中，除了defaults对象之外，我可以/应该在哪里声明我的模型的其他属性，以便可以通过Backbone的get和set方法访问它们？var MyM...

问Backbone.js获取和设置嵌套对象属性
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Backbone.js获取和设置嵌套对象属性EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Backbone.js获取和设置嵌套对象属性
EN