¿Cómo se muestra correctamente una vista de colección de marionetas de Backbone basada en una propiedad de matriz javascript modelo?

Question

* ACTUALIZACIÓN: Vea el código de respuesta final en el último bloque de código a continuación. *

Actualmente tengo un problema al mostrar una colección en una vista de colección. La colección es una propiedad de un modelo existente como tal (pseudo código)

ApplicationVersion { Id: 1, VersionName: "", ApplicationCategories[] } 

Así que, esencialmente ApplicationVersion tiene una propiedad llamada ApplicationCategories que es una matriz de JavaScript. Actualmente, cuando renderizo la vista de colección asociada con ApplicationCategories, no se representa nada. Si depuro en el depurador de JavaScript de Chrome, parece que las categorías aún no se han completado (por lo que asumo que ApplicationVersion aún no se ha extraído). Aquí está mi código en su estado actual

ApplicationCategory Modelo, Colección, y Vistas

ApplicationModule.ApplicationCategory = Backbone.Model.extend({ 
    urlRoot:"/applicationcategories" 
}); 

ApplicationModule.ApplicationCategories = Recruit.Collection.extend({ 
    url:"/applicationcategories", 
    model:ApplicationModule.ApplicationCategory, 

    initialize: function(){ 
     /* 
     * By default backbone does not bind the collection change event to the comparator 
     * for performance reasons. I am choosing to not preoptimize though and do the 
     * binding. This may need to change later if performance becomes an issue. 
     * See https://github.com/documentcloud/backbone/issues/689 
     * 
     * Note also this is only nescessary for the default sort. By using the 
     * SortableCollectionMixin in other sorting methods, we do the binding 
     * there as well. 
     */ 
     this.on("change", this.sort); 
    }, 

    comparator: function(applicationCategory) { 
     return applicationCategory.get("order"); 
    }, 

    byName: function() { 
     return this.sortedBy(function(applicationCategory) { 
      return applicationCategory.get("name"); 
     }); 
    } 
}); 

_.extend(ApplicationModule.ApplicationCategories.prototype, SortableCollectionMixin); 

ApplicationModule.ApplicationCategoryView = Recruit.ItemView.extend({ 
    template:"application/applicationcategory-view-template" 
}); 

ApplicationModule.ApplicationCategoriesView = Recruit.CollectionView.extend({ 
    itemView:ApplicationModule.ApplicationCategoryView 
}); 

plantilla ApplicationCategory

<section id="<%=name%>"> 
    <%=order%> 
</section> 

ApplicationVersion Modelo, Colección, y Vistas

ApplicationModule.ApplicationVersion = Backbone.Model.extend({ 
    urlRoot:"/applicationversions" 
}); 

ApplicationModule.ApplicationVersions = Recruit.Collection.extend({ 
    url:"/applicationversions", 
    model:ApplicationModule.ApplicationVersion 
}); 

ApplicationModule.ApplicationVersionLayout = Recruit.Layout.extend({ 
    template:"application/applicationversion-view-template", 

    regions: { 
     applicationVersionHeader: "#applicationVersionHeader", 
     applicationVersionCategories: "#applicationVersionCategories", 
     applicationVersionFooter: "#applicationVersionFooter" 
    } 
}); 

ApplicationModule.ApplicationVersionController = { 
    showApplicationVersion: function (applicationVersionId) { 
     ApplicationModule.applicationVersion = new ApplicationModule.ApplicationVersion({id : applicationVersionId}); 

     var applicationVersionLayout = new Recruit.ApplicationModule.ApplicationVersionLayout({ 
      model:ApplicationModule.applicationVersion 
     }); 

     ApplicationModule.applicationVersion.fetch({success: function(){ 
      var applicationVersionCategories = new Recruit.ApplicationModule.ApplicationCategoriesView({ 
       collection: ApplicationModule.applicationVersion.application_categories 
      }); 
      applicationVersionLayout.applicationVersionCategories.show(applicationVersionCategories); 
     }}); 

     // Fake server responds to the request 
     ApplicationModule.server.respond(); 

     Recruit.layout.main.show(applicationVersionLayout); 
    } 
}; 

aquí es mi plantilla ApplicationVersion

<section id="applicationVersionOuterSection"> 
<header id="applicationVersionHeader"> 
    Your Application Header <%= id %> 
</header> 
<section id="applicationVersionCategories"> 
</section> 
<footer id="applicationVersionFooter"> 
    Your footer 
</footer> 

Hay que destacar que estoy usando actualmente Sinon para burlarse de mi respuesta del servidor, pero no creo que esto está causando los problemas, ya que está respondiendo con la información como espero que mira a través de la depurador de JavaScript (y como he dicho, muestra la id de ApplicationVersion correctamente). Puedo proporcionar este código también si ayuda

Actualmente está mostrando el ID de la versión de la aplicación (id en la plantilla), así que sé que está obteniendo los datos correctamente para las propiedades normales, simplemente no está renderizando mis ApplicationCategories javascript propiedad de matriz

Por lo tanto, en última instancia, estoy vinculado al éxito de la búsqueda de ApplicationVersion y, a continuación, configurando la vista de ApplicationCategories. Como esto no funciona como espero, me pregunto si existe una mejor manera de crear esta vista de colección.

Gracias por cualquier ayuda

Actualización: A ejemplo de código que Derek Bailey me llevan demasiado.

ApplicationModule.ApplicationVersionController = { 
    showApplicationVersion: function (applicationVersionId) { 
     ApplicationModule.applicationVersion = new ApplicationModule.ApplicationVersion({id : applicationVersionId}); 

     var applicationVersionLayout = new Recruit.ApplicationModule.ApplicationVersionLayout({ 
      model:ApplicationModule.applicationVersion 
     }); 

     ApplicationModule.applicationVersion.fetch(); 

     // Fake server responds to the request 
     ApplicationModule.server.respond(); 

     Recruit.layout.main.show(applicationVersionLayout); 

     var applicationVersionCategories = new Recruit.ApplicationModule.ApplicationCategoriesView({ 
      collection: new Backbone.Collection(ApplicationModule.applicationVersion.get('application_categories')) 
     }); 
     applicationVersionLayout.applicationVersionCategories.show(applicationVersionCategories); 
    } 
}; 

Answer 1

CollectionView de marionetas requiere un Backbone.Collection válida, no es una simple matriz. Necesita crear un Backbone.Collection desde su matriz al pasarlo a la vista:

new MyView({ 
    collection: new Backbone.Collection(MyModel.Something.ArrayOfThings) 
});