2

我试图按照http://ricostacruz.com/backbone-patterns/#inline_templates来避免http://ricostacruz.com/backbone-patterns/#abuse但是我有这样的典型观点：

// in app.js
App.MyView = Backbone.View.extend({
    className: "ui-widget-content",
    template: _.template($("#myTemplate").html()),
    render: function() 
    {
        this.$el.html(this.template(this.model.toJSON()));
    }

然后我像这样包含 app.js

<script src="./js/jquery-1.7.2.min.js"></script>
<script src="./js/jquery-ui-1.8.20.custom.min.js"></script>
<script src="./js/underscore.js"></script>
<script src="./js/backbone.js"></script>
<script src="./js/app.js"></script>

浏览器抱怨$("#myTemplate")App.MyView.template 中的行是null（因为文档还没有准备好？）。我该怎么办？

4

3 回答 3

2

为什么不延迟加载您的模板？在第一次使用时编译模板并将编译后的模板缓存在视图的“类”中。你甚至可以添加你的基本视图来处理这个缓存，如下所示：

var BV = Backbone.View.extend({
    template: function(data) {
        if(!this.constructor.prototype._template)
            this.constructor.prototype._template = _.template($('#' + this.tmpl_id).html());
        return this._template(data);
    }
});

然后你可以有这样的事情：

var V = BV.extend({
    tmpl_id: 'tmpl',
    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

并且#tmpl模板将在第一次使用时编译，并且最多编译一次。

演示：http: //jsfiddle.net/ambiguous/hrnqC/

注意演示中的no wrap (head)并查看控制台以查看正在编译的内容以及编译频率。

于 2012-05-30T21:16:08.477 回答
1

我对此的快速解决方法是在视图初始化时编译模板..

App.MyView = Backbone.View.extend({
    className: "ui-widget-content",
    template: '#myTemplate',
    initialize: function(){
        this.template = _.template($(this.template).html());
    },
    render: function(){
        this.$el.html(this.template(this.model.toJSON()));
    }

然后其他一切仍然有效，您可以将渲染方法放在基类中..

于 2012-05-31T03:25:59.267 回答
0

最简单的做法就是不缓存模板：

App.MyView = Backbone.View.extend({
    className: "ui-widget-content",
    render: function() 
    {
        var template = _.template($("#myTemplate").html())
        this.$el.html(template(this.model.toJSON()));
    }
于 2012-05-30T20:24:19.057 回答