backbone.js – 如何根据模型javascript数组属性正确显示Backbone牵线木偶集合视图？

*更新：请参阅下面最后一个代码块中的最终答案代码.*

目前,我在集合视图中显示集合时遇到问题.该集合是现有模型的属性,如此(伪代码)

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>

有一点需要注意我正在使用Sinon来模拟我的服务器响应,但我不认为这会导致问题,因为它正在响应信息,因为我期望通过javascript调试器查看(就像我说它显示的是ApplicationVersion id正确).如果它有帮助,我也可以提供此代码

它当前正在显示应用程序版本ID(模板中的id),因此我知道它正在为正常属性正确获取数据,它只是不呈现我的ApplicationCategories javascript数组属性.

因此,最终我对ApplicationVersion的获取成功具有约束力,然后为ApplicationCategories设置视图.因为这不像我预期的那样工作,我想知道是否有更好的方法来创建这个集合视图？

谢谢你的帮助

更新：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);
    }
};

解决方法

Marionette的CollectionView需要一个有效的Backbone.Collection,而不是一个简单的数组.在将数组传递给视图时,需要从数组中创建Backbone.Collection：

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