Wie zeigen Sie eine Backbone-Marionettensammlungsansicht basierend auf einer JavaScript-Array-Modelleigenschaft ordnungsgemäß an?

Question

* AKTUALISIEREN: Siehe endgültigen Antwortcode im letzten Codeblock unten. *

Derzeit habe ich ein Problem mit der Anzeige einer Sammlung in einer Sammlungsansicht. Die Sammlung ist eine Eigenschaft eines existierenden Modells wie so (Pseudocode)

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

So Wesentlichen Programmversion hat eine Eigenschaft, die genannte ApplicationCategories ein JavaScript-Array ist. Wenn ich derzeit die mit ApplicationCategories verknüpfte Sammlungsansicht rendere, wird nichts gerendert. Wenn ich im Javascript-Debugger von Chrome debugge, scheint es, dass die Kategorien noch nicht gefüllt worden sind (also nehme ich an, ApplicationVersion wurde noch nicht abgerufen). Hier ist mein Code, wie es derzeit steht

ApplicationCategory Modell, Sammlung und Ansichten

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 
}); 

ApplicationCategory Vorlage

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

Programmversion Modell, Sammlung und Ansichten

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); 
    } 
}; 

hier ist meine ApplicationVersion Vorlage

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

Eine Sache zu beachten ich derzeit Sinon bin mit meinem Server-Antwort zu verspotten, aber ich glaube nicht, das die Probleme verursacht, wie es mit der Information reagiert, wie ich durch die erwarten suchen Javascript Debugger (und wie ich schon sagte, es zeigt ApplicationVersion ID korrekt an). Ich kann diesen Code auch zur Verfügung stellen, wenn es hilft

Es zeigt zur Zeit die Anwendungsversions-ID (ID in der Vorlage), so dass ich weiß, dass es die Daten für normale Eigenschaften korrekt abruft, es ist nur nicht meine ApplicationCategories Javascript Array-Eigenschaft.

Letztendlich bin ich verbindlich an den Erfolg des Fetch für ApplicationVersion, dann die Ansicht für die ApplicationCategories einrichten. Da dies nicht wie erwartet funktioniert, frage ich mich, ob es eine bessere Möglichkeit gibt, diese Ansicht zu erstellen.

Vielen Dank für jede Hilfe

UPDATE: Arbeits Code Beispiel, dass Derek Bailey führen mich.

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

Marionette der Collection benötigt eine gültige Backbone.Collection, kein einfaches Array. Sie müssen eine Backbone.Collection aus Ihrem Array erstellen, wenn Sie sie an die Ansicht übergeben:

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