javascript - traductor - Filtrado dinámico por nodo primario en JSON anidado(BackboneJS)
backbone vs react (1)
Sé que el título de la pregunta es un poco confuso, así que, por favor, discúlpeme. Espero poder explicar mi problema.
Tengo una estructura de datos así:
{
"_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
}
}
Y mi código es actualmente así:
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()
(Tenga en cuenta que tengo una versión más grande que funciona, pero con una estructura no anidada, así que esto es solo para sandboxing).
De todos modos, imagina que tengo otra vista que contiene una entrada desplegable de select , rellenada por "Formulario de alineación de prueba" y "Otro formulario". Cuando selecciono uno, quiero que los modelos vuelvan a ser hijos de esa forma. Entonces, el equivalente a analizar @[''_data''][''Test Alignment Form''] . También quiero poder acceder al objeto "_meta", ya que me gustaría poder imprimir la fecha generada en otra vista, por ejemplo. ¿Alguien sabe de las mejores prácticas para lograr esto? ¡Me he estado tirando de los pelos!
Gracias :)
Entonces ... hmm tienes una colección de colecciones para uno. Sus datos son una colección que contiene formularios. Los formularios son una colección de entradas.
su colección de formularios debe incluir su estructura de datos.
entonces debería hacer modelos de forma. esos modelos de formulario tienen colecciones de entrada.
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
los modelos dentro de EntryCollection pueden acceder a @collection.meta
Debe tener en cuenta que este tipo de anidamiento es propenso a pérdidas de memoria, por lo que si su página permanece abierta durante días, debe considerar delete @parent , etc., pero es posible que no tenga que preocuparse por ello.
Esta es solo una primera oportunidad, probablemente podría hacer mejoras, pero si va a construir esto más, quiere tener un modelo para cada objeto y una colección para cada matriz. tu _data es en realidad una matriz.
tienes
"_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"
}
]
},
debería ser
"_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"
}
],
},
];
a menos que sea un malentendido, pero creo que Another Form es generada por el usuario ... podría haber formas infinitas ¿no?
Con respecto a su seguimiento
FormView
render: ->
@$el.empty().append formTemplate(this)
@model.entries.each (model) =>
# if you need more speed or re-render often, you can cache these views later
entryView = new EntryView {model}
# assumes you have an entries-container in your form template
@$(''.entries-container'').append entryView.render().el