Question

我有一个骨干牵线木偶复合视图如下

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

根据主干木偶的预期代码流是

4 appendHtml

onRender

昂秀

这是怎么发生的？

Answer 1

这可能是因为你在初始化函数中提取数据？获取会导致collection.reset（），因此您的Composite视图将按照文档中的说明重新呈现：

“复合视图的模型和集合将在以下条件下重新渲染：

当集合的“重置”事件被触发时，它只会在复合中重新呈现集合，而不是包装器模板......“

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

在调用VideosView时尝试类似的东西：

var myVideos = new VideoCollection();

myVideos.fetch({success:function(){

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

当然现在您可以删除初始化功能。

Answer 2

您使用的是什么版本的木偶？在v1.0.0-beta1中有一个导致此问题的错误：https://github.com/marionettejs/backbone.marionette/issues/287

它已在v1.0.0-beta2中修复（最新版本是v1.0.0-beta3，截至撰写本文时）

Backbone Marionette复合视图onRender执行两次

2 个答案: