javascript - CollectionView - 集合数据未传递给 childView

Question

我正在尝试使 collectionView 工作，但我不太确定 CollectionView 是否自动启动 fetch 方法，然后使用获取的数据填充 ChildViews。或者这是我需要手动做的事情？我已经检查了 Marionette 文档页面，但找不到任何可以回答我的问题的正确示例。

下面的示例是我到目前为止所得到的，集合填充了所有必需的数据，但由于某种原因数据没有传递到 subview 。

每当我调用“http://localhost/GetCategories”时，都会返回以下 JSON ':

JSON 数据:

[{"category_id":"Category1","category_name":"Category One"}, 
 {"category_id":"Category2","category_name":"Category Two"}]

集合:

  define([ 'underscore',  'backbone',  'models/MainMenu/MM.model.category'], function(_, Backbone, m_Category){
      var CategoriesCollection = Backbone.Collection.extend({
        model: m_Category,

        url : 'GetCategories';

        initialize: function() {
            console.log('CategoriesCollection initialized...');
            this.fetch()
        }

      });


  return CategoriesCollection;
});

Collection View :

define([ 'backbone', 'underscore', 'marionette', 
    'collections/MainMenu/collection.categories' , 
    'layouts/MainMenu/itemview.category'], 
    function (Backbone, _, Marionette, c_Categories, iv_Category) {
    "use strict";
    var CategoriesCollectionView = Marionette.CollectionView.extend({

        tagName: 'div',

        template: null,

        id: 'categories',

        childView: iv_Category,

        collection : new c_Categories(),

        initialize: function(){
            console.log('Categories Collection: initialized');

            /// or should I call fetch() from within the CV? 
            /// but how do I then pass all the data to ChildView? 
            this.collection.fetch().done(function(){

            })
        },
        onRender: function(){
            console.log(this.collection) ///<-- shows all the JSON data properly
        },
        onShow: function(){
        }
    });

    return CategoriesCollectionView;
});

项目 View :

define([ 'backbone', 'underscore', 'marionette', 'templates/template.mainmenu'], function (Backbone, _, Marionette, template) {
    "use strict";
    var CategoryView = Marionette.ItemView.extend({

        tagName: 'div',

        template: template['category.layout'],

        id: 'category-layout',

        initialize: function(){
            console.log('Category Layout: initialized');
        },
        onRender: function(){
            console.log(this.model) /// < --- doesn't return anything 
        },
        onShow: function(){
            console.log(this.model) ///< --- doesn't return anything 
        }
    });

    return CategoryView;
});

它仅在我在 CollectionView 之上创建 LayoutView 并处理从那里获取和分配集合时才有效。

define([ 'backbone', 'underscore', 'marionette', 
            'templates/template.mainmenu', 
            'collections/MainMenu/MM.collection.categories',
            'layouts/MainMenu/collectionview.categories'    ],
    function (Backbone, _, Marionette, template, c_Categories, cv_Categories) {
    "use strict";
    var CategoryLayoutView = Marionette.LayoutView.extend({


        template: template['categories.layout'],

        regions: {
            categories : '#categories'
        },

        id: 'categories-layout',

        initialize: function(options){
            this.collection = new c_Categories();
            console.log('Category Layout: initialized');
        },

        onRender: function(){
            var categories = this.categories
            var collection = this.collection;
            collection.fetch().done(function(cData){
                categories.show(new cv_Categories({collection : collection}))
            })
        },

        onShow: function(){
        }
    });

    return CategoryLayoutView;
});

任何帮助将不胜感激。

谢谢

Answer 1

预备知识:Collection/CompositeView 的主要目的是正确渲染 Backbone.Collection，即将集合模型传递给 CollectionView 子级，并渲染这些子级。除了提供一个 Collection/CompositeView 以及一个预填充的集合(这是关键)之外，您无需参与。

现在，您遇到的问题是您正在 CategoriesCollection.initialize() 上执行异步提取(默认情况下所有 AJAX 调用都是异步的)。由于在定义 CategoriesCollectionView(请参阅其 collection 属性)时会调用该初始化，因此在渲染它时，提取可能不会及时返回。因此，CollectionView 会进行渲染，但找不到模型，并且仅渲染一个 emptyView(如果已提供)。

你有两个选择:在 LayoutView 中执行你正在做的事情(这不仅是我在我的观点中总是做的事情，而且我已经与一些顶级 Marionette 贡献者交谈过并且它们执行相同的操作)，或者同步获取(出于性能原因，我不建议这样做)。

一些提示

1. 从 CategoriesCollection.initialize() 中删除提取(如果您想将其保留在那里，则必须传递选项 { async: false }在获取中，以保证数据会在您渲染 View 时返回。但是，我不建议这样做，因为您在等待获取时会阻塞 CPU)。

2. 从 CategoriesCollectionView 定义中删除 CategoriesCollectionView.collection 属性。相反，我们将从父 LayoutView 中传递集合

3. 我建议您在 Promise 处理程序中使用 .then() 而不是 .done()。两个原因:

   a. .then() 更好地处理错误:如果错误不受管理，它将显示堆栈跟踪，并且第二个参数始终可用于实际处理 Promise 导致的错误。b. .then() 允许您继续链接。也许不是在这个调用中，但在其他一些 Promise 中，您可能希望在调用进入后调用一系列回调。顾名思义，.done() 是回调链的末尾

除此之外，您的解决方案是最佳实践。