如何正确显示基于模型javascript数组属性的Backbone木偶集合视图？

Question

* UPDATE：请参阅下面最后一个代码块中的最终答案代码。 *

目前我遇到的问题是在集合视图中显示集合。 （伪代码）

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

所以基本上ApplicationVersion有一个名为ApplicationCategories的属性，它是一个javascript数组。目前，当我呈现与ApplicationCategories关联的集合视图时，不会呈现任何东西。如果我在Chrome的javascript调试器中调试，看起来类别尚未填充（所以我认为ApplicationVersion尚未被提取）。这里是我的代码，因为它目前为

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模板

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

ApplicationVersion模型，收集和查看

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

这里是我的ApplicationVersion模板

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

有一点要注意我目前使用兴农嘲笑我的服务器响应，但我不认为这是造成问题，因为它是与信息响应如我所料翻翻javascript调试器（就像我说的，它正确显示ApplicationVersion ID）。我可以提供这个代码，如果它有帮助

它目前正在显示应用程序版本ID（模板中的ID），所以我知道它正常地获取正常的属性的数据，它只是不呈现我的ApplicationCategories JavaScript数组属性。

因此，最终我绑定到ApplicationVersion的获取成功，然后设置ApplicationCategories的视图。由于这不是像我期望的那样工作，我想知道是否有更好的方法来创建这个集合视图？

感谢所有帮助

UPDATE：工作代码示例德里克贝利带领我。

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需要一个有效的Backbone.Collection，不是一个简单的数组。您需要从数组中创建一个Backbone.Collection，并将它传递给视图：

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