javascript - 如何正确存储 javascript 模板，使其不会被多次实例化

Question

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

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!')
    }
})

我的问题是，对于这种特定类型的 View ，我只想去抓取 html 一次，而且只有一次，这样如果我有很多项目，它就不会每次都在 html 中搜索这个模板。

基本上，我如何将模板变量正确存储在 ItemView 中？对象级别(不是 View 的实例)记住 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;
  }
}

然后在您的 View 中，您可以调用 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:我的 Backbone.Marionette 框架中有一个更强大的 TemplateCache 对象版本:https://github.com/derickbailey/backbone.marionette