我如何妥善保存一个javascript模板，因此，它不会被实例化多次 [英] How do I properly store a javascript template, so that it isn't instantiated multiple times

问题描述

我使用骨干并因此的下划线来渲染我的模板。我的模板呈现得到在＆LT;脚本＆GT; 标签，然后使用jQuery抓住他们的HTML。我的看法骨干看起来是这样的：

I'm using Backbone and therefore Underscore to render my templates. My templates get rendered in <script> tags and then I use jQuery to grab their html. My backbone view looks like this:

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，每次这个模板。

My Issue is I would like to only go and grab the html once and only once for this particular type of view so that if I have a lot of items it doesn't go searching the html for this template each time.

基本上我怎么正确地储存在牢记的HTML的检索必须等待，直到 ItemView控件对象级别（不是该视图的实例）的模板变量页面加载后（这样我可以保证HTML模板可用）。

Basically how do I properly store the template variable at the ItemView object level (not instance of the view) keeping in mind that the retrieval of the html has to wait until after page load (so that I can guarantee the template html is available).

推荐答案

您可以建立一个非常简单的对象缓存模板供您：

You can build a very simple object that caches the templates for you:

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 ，并通过在模板中选择。

Then in your view, you can call TemplateCache.get and pass in your template selector.

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加载它。任何后续调用，以获得模板将其加载从缓存版本和prevent额外的DOM访问呼叫。

The first time you call TemplateCache.get for a given selector, it will load it from the DOM. Any subsequent calls to get the template will load it from the cached version and prevent the extra DOM access call.

FWIW：我有一个更强大的版本 TemplateCache 对象在我的Backbone.Marionette框架：<一href=\"https://github.com/derickbailey/backbone.marionette\">https://github.com/derickbailey/backbone.marionette

FWIW: I have a much more robust version of the TemplateCache object in my Backbone.Marionette framework: https://github.com/derickbailey/backbone.marionette

这篇关于我如何妥善保存一个javascript模板，因此，它不会被实例化多次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！