嵌套JSON(BackboneJS)中父节点的动态过滤

时间:2014-04-22 14:37:16

标签: javascript backbone.js coffeescript marionette

我知道问题标题有点令人困惑所以请原谅我 - 希望我能解释一下我的问题。

我有这样的数据结构:

{
  "_data": {
    "Test Alignment Form": [
      {
        "review_form": "Test Alignment Form",
        "rvee_uid": "52",
        "firstName": "Joe",
        "lastName": "Bloggs",
        "status": "NOT_STARTED",
        "status_clean": "Not started"
      },
      {
        "review_form": "Test Alignment Form",
        "rvee_uid": "54",
        "firstName": "Steve",
        "lastName": "Stevenson",
        "status": "NOT_STARTED",
        "status_clean": "Not started"
      },
      {
        "review_form": "Test Alignment Form",
        "rvee_uid": "13",
        "firstName": "Anne",
        "lastName": "Boleyn",
        "status": "COMPLETED",
        "status_clean": "Completed"
      }
    ],
    "Another Form": [
      {
        "review_form": "Another Form",
        "rvee_uid": "10",
        "firstName": "Luther",
        "lastName": "Vandross",
        "status": "NEVER_TOO_MUCH",
        "status_clean": "Never too much, never too much... duh duh duh"
      },
      {
        "review_form": "Another Form",
        "rvee_uid": "54",
        "firstName": "Steve",
        "lastName": "Stevenson",
        "status": "NOT_STARTED",
        "status_clean": "Not started"
      },
      {
        "review_form": "Another Form",
        "rvee_uid": "13",
        "firstName": "Anne",
        "lastName": "Boleyn",
        "status": "COMPLETED",
        "status_clean": "Completed"
      }
    ]
  },
  "_meta": {
    "generated": 1397642209,
    "length": 62,
    "duration": 3,
    "author": 0
  }
}

我的代码目前是这样的:

window.app = app = window.app or
  models:      {}
  collections: {}
  views:       {}
  routes:      {}
  init:        () ->
    console.log 'Initialised app.'
    app._app = new app.views.table()

#-----------------------------------------------------------------------------#

app.models.form = Backbone.RelationalModel.extend
  defaults:
    firstName:    ""
    lastName:     ""
    review_form:  ""
    rvee_uid:     "0"
    status:       ""
    status_clean: "UNKNOWN"

  initialize: () ->
    console.log "Initialised model 'form'."



app.collections.mainCollection = Backbone.Collection.extend
  model: app.models.form
  url: "data/data.json"
  initialize: (models, options) ->
    console.log "Initialised collection 'mainCollection'."
    @options = options

    @fetch reset: true

    @on "reset", () ->
      console.log "Collection reset!"



app.views.tableItem = Backbone.View.extend

  tagName: 'li'

  template: _.template $('#row').html()

  initialize: () ->
    console.log "Initialised view 'tableItem'."

  render: () ->
    console.log "Rendered view 'tableItem'."
    @$el.html @template @model.toJSON()
    @



app.views.table = Backbone.View.extend

  el: '#table'

  initialize: (data) ->
    console.log "Initialised view 'table'."
    @collection = new app.collections.mainCollection data

    @listenTo @collection, 'reset', () ->
      @render()

  render: () ->
    console.log "Rendered view 'table'."
    @$el.empty()
    console.log @collection.models
    _.each @collection.models, (_item) =>
      @renderItem(_item)

  renderItem: (_item) ->
    item = new app.views.tableItem
      model: _item

    @$el.append item.render().el


#-----------------------------------------------------------------------------#

app.init()

(请记住,我有一个更大的工作版本,但是有一个非嵌套结构,所以这只适用于沙盒)。

无论如何,想象一下,我有另一个包含select下拉输入的视图,其中填充了“Test Alignment Form”和“Another Form”。当我选择一个时,我希望返回的模型是该表单的子项。所以,相当于解析@['_data']['Test Alignment Form']。我希望能够访问“_meta”对象,例如,我希望能够在另一个视图中打印出生成的日期。有谁知道实现这一目标的最佳做法?我一直在拔头发!

谢谢:)

1 个答案:

答案 0 :(得分:3)

所以..嗯,你有一个集合的集合。您的数据是包含表单的集合。表格是一系列条目。

您的表单集应该采用您的数据结构。

那么它应该制作表格模型。那些表格模型有入门系列。

FormCollection

  parse: (res) ->

    {@_meta} = res
    _.map res._data, (data, formName) =>
      {formName, data}  # we have 2 attributes on the form model

FormModel

  initialize: ->
    @on 'reset', ->
      # Since each form also has a collection of entries, we create a collection
      @entries ?= new EntryCollection
      @entries.parent = this # this circular dependency will create memory leaks
      @entries.reset @get('data'), parse: true #remember data is an array

EntryCollection

  parse: (res) ->
    @meta = parent.collection._meta
    res

EntryModel
<{1}}中的

模型可以访问EntryCollection

您应该注意,这种嵌套很容易出现内存泄漏,因此如果您的页面保持打开数天,您应该考虑@collection.meta等,但您可能不需要担心它。

这只是它的第一次拍摄,你可能会做出改进,但是如果你要构建更多,你想要为每个对象和每个数组的集合建立一个模型。你的_data实际上是数组。

你有

delete @parent

应该是

"_data": {
  "Test Alignment Form": [
    {
      "review_form": "Test Alignment Form",
      "rvee_uid": "52",
      "firstName": "Joe",
      "lastName": "Bloggs",
      "status": "NOT_STARTED",
      "status_clean": "Not started"
    },
    {
      "review_form": "Test Alignment Form",
      "rvee_uid": "54",
      "firstName": "Steve",
      "lastName": "Stevenson",
      "status": "NOT_STARTED",
      "status_clean": "Not started"
    },
    {
      "review_form": "Test Alignment Form",
      "rvee_uid": "13",
      "firstName": "Anne",
      "lastName": "Boleyn",
      "status": "COMPLETED",
      "status_clean": "Completed"
    }
  ],
  "Another Form": [
    {
      "review_form": "Another Form",
      "rvee_uid": "10",
      "firstName": "Luther",
      "lastName": "Vandross",
      "status": "NEVER_TOO_MUCH",
      "status_clean": "Never too much, never too much... duh duh duh"
    },
    {
      "review_form": "Another Form",
      "rvee_uid": "54",
      "firstName": "Steve",
      "lastName": "Stevenson",
      "status": "NOT_STARTED",
      "status_clean": "Not started"
    },
    {
      "review_form": "Another Form",
      "rvee_uid": "13",
      "firstName": "Anne",
      "lastName": "Boleyn",
      "status": "COMPLETED",
      "status_clean": "Completed"
    }
  ]
},

除非我误解,但我认为"_data": [ { name: "Test Alignment Form", contents: [ { "review_form": "Test Alignment Form", "rvee_uid": "52", "firstName": "Joe", "lastName": "Bloggs", "status": "NOT_STARTED", "status_clean": "Not started" }, { "review_form": "Test Alignment Form", "rvee_uid": "54", "firstName": "Steve", "lastName": "Stevenson", "status": "NOT_STARTED", "status_clean": "Not started" }, { "review_form": "Test Alignment Form", "rvee_uid": "13", "firstName": "Anne", "lastName": "Boleyn", "status": "COMPLETED", "status_clean": "Completed" } ], }, { name: "Another Form", contents: [ { "review_form": "Another Form", "rvee_uid": "10", "firstName": "Luther", "lastName": "Vandross", "status": "NEVER_TOO_MUCH", "status_clean": "Never too much, never too much... duh duh duh" }, { "review_form": "Another Form", "rvee_uid": "54", "firstName": "Steve", "lastName": "Stevenson", "status": "NOT_STARTED", "status_clean": "Not started" }, { "review_form": "Another Form", "rvee_uid": "13", "firstName": "Anne", "lastName": "Boleyn", "status": "COMPLETED", "status_clean": "Completed" } ], }, ]; 是用户生成的......可能有无限形式吗?

关于你的跟进

Another Form