6

*更新: 以下の最後のコード ブロックの最終回答コードを参照してください。*

現在、コレクション ビューでコレクションを表示する際に問題が発生しています。コレクションは、そのような既存のモデルのプロパティです（疑似コード）

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

したがって、基本的に ApplicationVersion には、javascript 配列である ApplicationCategories というプロパティがあります。現在、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>

注意すべきことの1つは、現在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);
    }
};
4

1 に答える 1

9

Marionette の CollectionView には、単純な配列ではなく、有効な Backbone.Collection が必要です。ビューに渡すときに、配列から Backbone.Collection を作成する必要があります。


new MyView({
  collection: new Backbone.Collection(MyModel.Something.ArrayOfThings)
});
于 2012-08-07T21:04:38.700 に答える