2

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)
4

1 に答える 1

2

これは、モデルの定義方法が原因で発生しています。

app.models.Row = Backbone.Model.extend({
  childColumns: []
})

問題は、定義でchildColumns空の配列 に設定されていることです。毎回新しい配列を作成するのではなく、各モデルに同じ配列参照を割り当てます。これは、作成するすべてのエントリが同じ配列を参照していることを意味します。[]newRow

単一の配列を参照する代わりに、新しいエントリを作成するたびに新しい配列を作成する必要があります。

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よりバックボーン風にしたい場合は、モデルのメソッドで配列の初期化を行うこともできます。

于 2013-07-15T12:45:55.457 に答える