How to correctly display the view of the Trunk puppet collection based on the properties of the javascript model array?

Question

* UPDATE . See the final response code in the last block of code below. *

I am currently having a problem displaying the collection as a collection. A collection is a property of an existing model, such as (pseudo-code)

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

So essentially ApplicationVersion has the ApplicationCategories property, which is a javascript array. Currently, when I create a collection view associated with ApplicationCategories, nothing is displayed. If I am debugging in the javascript JavaScript debugger, it seems that the categories have not yet been populated (so I assume ApplicationVersion has not been selected yet). Here is my code in its current form

Model, Collection, and Views ApplicationCategory

 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 Template

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

ApplicationVersion Model, Collection, and Views

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

Here is my ApplicationVersion template

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

One thing that I want to point out is that I am currently using Sinon to make fun of my answer to the server, but I don't think this is causing problems as it responds with information, as I expect to view the javascript debugger (and, as I said this correctly displays the ApplicationVersion id). I can also provide this code if it helps

Currently, the version identifier of the application is displayed (id in the template), so I know that it correctly retrieves data for normal properties, it just does not display the javascript property of my ApplicationCategories.

So, in the end, I get attached to the fetch success for ApplicationVersion, and then adjust the view for ApplicationCategories. Since this does not work, as I expect, I am wondering if there is a better way to create this collection view?

Thanks for any help

UPDATE: An example of working code that also leads me to Derek Bailey.

 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 CollectionView requires a valid Backbone.Collection, not a simple array. You need to create a Backbone.Collection from your array when passing it to the view:

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