每个函数中的Javascript新对象都不能像我想象的那样工作
每个函数中的Javascript新对象都不能像我想象的那样工作
提问于 2013-07-15 18:23:46
我在forEach循环期间创建了一个新的主干模型，然后在内部运行另一个forEach循环，创建另一个主干模型，并将其作为属性传递回前一个模型。
然而，到最后，子模型似乎被添加到了所有第一级模型中。
http://jsfiddle.net/ZBvV4/
var page =
{ rows:
[
{ layout: '1:1:1'
, columns:
[
{ widgets:
[
{
type: 'twitter'
}
, {
type: 'facebook'
}
]
}
, { widgets:
[
{
type: 'image-slider'
}
, {
type: 'instagram'
}
]
}
, { widgets:
[
{
type: 'instagram'
}
]
}
]
}
, { layout: '2:1'
, columns:
[
{ widgets:
[
{
type: 'twitter'
}
]
}
, { widgets:
[
{
type: 'image-slider'
}
]
}
]
}
]
}
var app = {
models: {}
, collections: {}
, views: {}
}
app.models.Row = Backbone.Model.extend({
childColumns: []
})
app.models.Column = Backbone.Model.extend({
childWidgets: []
})
var renderedRows = []
_.each(page.rows, function (row, rowIndex) {
////////////// * ROWS * //////////////
var rowModel = new app.models.Row({
layout: page.rows[rowIndex].layout
})
renderedRows.push(rowModel)
_.each(row.columns, function (column, columnIndex) {
////////////// * COLUMN * //////////////
var columnModel = new app.models.Column()
rowModel.childColumns.push(columnModel)
})
})
console.log('first row child columns', renderedRows[0].childColumns)
console.log('second row child columns', renderedRows[1].childColumns)回答 1
Stack Overflow用户
回答已采纳
发布于 2013-07-15 20:45:55
这是由于您定义模型的方式造成的。
app.models.Row = Backbone.Model.extend({
childColumns: []
})问题是在定义中将childColumns设置为空数组[]。new不会每次都为您创建新数组，它会为每个模型分配相同的数组引用。这意味着您创建的所有Row条目都引用了相同的数组。
您需要在每次创建新条目时创建一个新数组，而不是引用单个数组：
app.models.Row = Backbone.Model.extend({
childColumns: null
})
app.models.Column = Backbone.Model.extend({
childWidgets: null
})
// ...
_.each(page.rows, function (row, rowIndex) {
var rowModel = new app.models.Row({
layout: page.rows[rowIndex].layout
})
// Initialize a new array here
rowModel.childColumns = []
renderedRows.push(rowModel)
_.each(row.columns, function (column, columnIndex) {
var columnModel = new app.models.Column()
// Initialize a new array here
columnModel.childWidgets = []
rowModel.childColumns.push(columnModel)
})
})这是一个带有修复的jsFiddle：http://jsfiddle.net/5Epxz/1/
如果您希望它更像主干，也可以在模型的initialize方法中进行数组初始化。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17651978
复制相关文章
相似问题
腾讯云开发者
