如何正确存储javascript模板,以便多次实例化

Question

我正在使用Backbone,因此使用Underscore来渲染我的模板.我的模板在<script>标签中呈现,然后我使用jQuery来获取他们的html.我的主干视图如下所示:

App.ItemView = Backbone.View.extend({
    className:'well',

    events: {
        'click .continue': 'handleContinueClick',
    },

    initialize: function() {
        this.template = _.template($("#ItemTemplate").html())
        this.render()
    },

    render: function() {
        $(this.el).html(this.template({model:this.model}))
    },

    handleContinueClick: function(e) {
        alert('Clicked!')
    }
})

我的问题是我只想为这个特定类型的视图只抓取一次html,这样如果我有很多项目,那么每次都不会在html中搜索这个模板.

基本上我如何在ItemView对象级别(不是视图的实例)正确存储模板变量,记住html的检索必须等到页面加载后(这样我才能保证模板html可用).

Answer 1

您可以构建一个非常简单的对象来缓存模板:

TemplateCache = {
  get: function(selector){
    if (!this.templates){ this.templates = {}; }

    var template = this.templates[selector];
    if (!template){
      var tmpl = $(selector).html();
      template = _.template(tmpl);
      this.templates[selector] = template;
    }

    return template;
  }
}

然后在您的视图中,您可以调用TemplateCache.get并传入模板选择器.

Backbone.View.extend({
  template: "#ItemTemplate",

  render: function(){
    var template = TemplateCache.get(this.template);
    var html = template(this.model.toJSON());
    this.$el.html(html);
  }
});

第一次调用TemplateCache.get给定的选择器时,它将从DOM加载它.获取模板的任何后续调用都将从缓存版本加载它,并阻止额外的DOM访问调用.

FWIW:TemplateCache我的Backbone.Marionette框架中有一个更强大的对象版本:https://github.com/derickbailey/backbone.marionette

Answer 2

我见过的大多数Backbone示例都是这样做的.这将只遍历DOM一次,以在页面完成加载时解析模板,并为每个页面使用它new ItemView().

App.ItemView = Backbone.View.extend({
    template: _.template($("#ItemTemplate").html()),

    className:'well',

    events: {
        'click .continue': 'handleContinueClick',
    },

    ...
});

http://backbonejs.org/docs/todos.html#section-21