jquery - Backbone Marionette Composite View onRender 执行两次

Question

我有一个主干 Marionette 复合 View ，如下

VideosView = Backbone.Marionette.CompositeView.extend({
        template : videosTpl,
        id : "video",
        itemView : VideoView,

        initialize : function() {
                 //fetching the collection 
            var myVideos = new VideoCollection();
            myVideos.fetch();
            this.collection = myVideos;
        },
        appendHtml : function(collectionView, itemView) {
            //appending each videos to the video list
            console.log("appendHtml");
            collectionView.$("ul").append(itemView.el);

        },
        onRender: function(){
            console.log("onRender");

        },
        onShow: function(){
            console.log("onShow");

        }
    });

控制台的输出是

• onRender
• onShow
• 4 appendHtml
• onRender

根据主干 Marionette 的预期代码流程是

• 4 appendHtml
• onRender
• onShow

这是怎么发生的？

Answer 1

这可能是因为你在初始化函数中获取数据？ fetch 会导致 collection.reset() ，因此您的 Composite View 将按照文档中所述重新呈现:

“复合 View 的模型和集合将在以下条件下重新渲染自身:

• 当集合的“重置”事件被触发时，它只会重新渲染组合中的集合，而不是包装模板......”

事实上，当您将 myVideos 的值分配给 this.collection 时，您不能保证 fetch() 已完成其工作，由于 Javascript 的异步特性。

当您调用 VideosView 时尝试类似的操作:

var myVideos = new VideoCollection();

myVideos.fetch({success:function(){

    var View = new VideosView({collection:myVideos});
}});

当然，现在您可以清空初始化函数。