在获取完成之前显示主干木偶

Question

我知道我在做一些愚蠢的事情，但我的骨干木偶应用程序给了我没有意义的模板错误。它似乎在 fetch 事件发生之前呈现单个项目。

_.templateSettings = {
    interpolate: /\{\{(.+?)\}\}/g
};


MyApp = new Backbone.Marionette.Application();
MyApp.addRegions({
    TagsRegion: "#tagsHolder"
});



MyApp.NoItemsView = Backbone.Marionette.ItemView.extend({
    template: "#show-no-items-message-template"
});


MyApp.Tag = Backbone.Model.extend({

});
MyApp.TagCollection = Backbone.Collection.extend({
    model: MyApp.Tag,
    url: '/API/Tag'
});
MyApp.TagItemView = Backbone.Marionette.ItemView.extend({
    template: "#tag-template",
    tagName: 'li'
});


MyApp.TagCollectionView = Backbone.Marionette.CollectionView.extend({
    itemView: MyApp.TagItemView,
    emptyView: MyApp.NoItemsView,
    tagName: 'ul'
});


MyApp.addInitializer(function(options){
    var tagCollection = new MyApp.TagCollection({
    });
    var tagCollectionView = new MyApp.TagCollectionView({
        collection: tagCollection
    });

    tagCollection.fetch();
    MyApp.TagsRegion.show(tagCollectionView);
});

我的html页面是

<div id="TagsDiv">
    <h1>Tags</h1>
    <div id="tagsHolder"></div>
</div>    
<script type="text/template" id="show-no-items-message-template">
    No items found.
</script>

<script type="text/template" id="tag-template">
    {{ TagName }}
</script>


    <script type="text/javascript" src="/Scripts/Views/Home/Upload.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            MyApp.start();
        });

如果我从标签模板中删除胡须，它会显示 1：“TagName”，然后当提取完成时，它会显示正确的数字。

如果我把胡须放回去，我会得到“未定义标签名”

我觉得我的模式之一倒退了。我只是太近了，看不到它。

谢谢 -马克

Answer 1

问题在于初始化程序中的这一行

var tagCollection = new MyApp.TagCollection({
    });

当您将空对象字面量传递给 Backbone.Collection 构造函数时，Backbone 在集合中创建一个空模型。要解决这个问题，只需删除对象文字：

var tagCollection = new MyApp.TagCollection()

它不会再有空的项目了。

Answer 2

试试：

tagCollection.fetch({ wait: true });

Answer 3

修改了模型，使其具有我想要模板化的任何内容的默认值。感觉 Klugy，但它给了我一个有效的应用程序。

MyApp.Tag = Backbone.Model.extend({
    defaults :
        {
            TagName : 'None'
        }
});