Question

我有一个带有下划线模板的HTML文档：

                <div id="listings">
                <script type="text/template" id="listing-collection-template">
                    <@ _.each(listingCollection, function(listing) { @>
                       <div class="row-fluid well well-small">
                            <img src="<@= listing.imageUri @>" width="200" height="150" class="img-rounded pull-left hidden-phone" style="padding-right:10px">
                            <h3 class="text-center text-info"><@= listing.propertyName @></h3>
                            <img src="" width="100" height="75" class="img-rounded pull-left hidden-tablet hidden-desktop" style="padding-right:10px">
                            <br />
                            <strong><@= listings.sleeps @> Sleeps</strong>
                            <div class="pull-right text-info"><strong>$<@= listing.priceRanges[0].from @></strong></div>
                            <br />
                            <div class="rating rating-5 pull-right"></div>
                        </div> 
                    <@ }); @>
                </script>
                </div>

使用骨干，我通过视图将集合传递给模板。这是我的观看代码：

define(['backbone', 'listingView'], function (Backbone, ListingView) {
    return Backbone.View.extend({
        el: $('#listings'),
        initialize: function() {
            _.bindAll(this, 'render');
            this.collection.bind('reset', this.render);
        },
        render: function() {
                var listingTemplate = _.template($('#listing-collection-template').html(), { listingCollection: this.collection.toJSON() });
                $(self.el).empty();
                $(this.el).html(listingTemplate);
        }
    });
});

我第一次在页面上显示集合时工作正常。但是，如果我再次尝试显示它，这行代码

var listingTemplate = _.template($('#listing-collection-template').html(), { listingCollection: this.collection.toJSON() });

无法找到模板，因为HTML中的模板已被我第一次呈现的集合覆盖。如何避免此问题，或实施“刷新”功能？

这是我正在调用以呈现集合的代码：

var listing = new Listing();
var listingCollection = new ListingCollection();
listingCollection.fetch({ reset: true }); // reset: true needed in order to trigger reset event on collection
listingCollectionView = new ListingCollectionView({ collection: listingCollection });

Backbone.js和underscore.js重新加载模板

0 个答案: