Szkieletowa marionetka wyświetlana przed zakończeniem pobierania

Wiem, że robię coś głupiego, ale moja aplikacja marionetka kręgosłupa daje mi błędy szablonów, które nie mają sensu. Wydaje się, że renderuje pojedynczy element przed zdarzeniem pobierania.

_.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);
});

a moja strona HTML jest

<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();
        });

Jeśli usuwam wąsy z mojego szablonu znacznika, wyświetla on 1: „TagName”, a po zakończeniu pobierania wyświetla odpowiednią liczbę.

jeśli wsadzę wąsy z powrotem, otrzymam „TagName nie jest zdefiniowany”

Czuję, że mam jeden z moich wzorów do tyłu. Jestem za blisko, żeby to zobaczyć.

Dzięki -Mark

questionAnswers(3)

yourAnswerToTheQuestion