异步加载下划线模板的最佳方法 [英] Best way to asynchronously load underscore templates

问题描述

我打算使用Backbone.js的和underscore.js创建的网站，我将有很多的下划线模板：

I'm planning to use backbone.js and underscore.js for creating website, and I will have lots of underscore templates:

<script type="text/template" id="search_template">
<p id="header">
//header content will go here
</p>
<p id="form">
    <label>Search</label>
    <input type="text" id="search_input" />
    <input type="button" id="search_button" value="Search" />
</p>
<p id="dynamic_date">
//dynamic data will be displayed here
</p>
</script>

当然，我的模板将更加复杂。

Of course my templates will be much more complicated.

由于我将有很多人，我不希望每次加载所有的模板页面加载时。我想找到一个解决方案，在那里我可以只加载时，将使用其特定的模板。

Since I will have lots of them, I don't want to load all templates every time when page loads. I want to find a solution, where I can load specific template only when it will be used.

另一件事是，我的大多数模板将具有相同的结构，只有＆LT; p ID =形式＆GT;＆LT; / P＆GT; 和＆LT; p n =dynamic_date＆GT;＆LT; / p＆GT; 的内容会有所不同。

Another thing is that most of my templates will have same structure, only <p id="form"></p> and <p id="dynamic_date"></p> content will differ.

能否请你建议我应该怎么办呢？

Could you please suggest me how should I do it?

谢谢，

推荐答案

编辑：我做了一些研究和移植我iCanHaz code强调它也使用localStorage的可用

下面是github上存储库：<一href=\"https://github.com/Gazler/Underscore-Template-Loader\">https://github.com/Gazler/Underscore-Template-Loader

Here is a github repository: https://github.com/Gazler/Underscore-Template-Loader

在code是：

  (function() {
    var templateLoader = {
      templateVersion: "0.0.1",
      templates: {},
      loadRemoteTemplate: function(templateName, filename, callback) {
        if (!this.templates[templateName]) {
          var self = this;
          jQuery.get(filename, function(data) {
            self.addTemplate(templateName, data);
            self.saveLocalTemplates();
            callback(data);
          });
        }
        else {
          callback(this.templates[templateName]);
        }
      },

      addTemplate: function(templateName, data) {
        this.templates[templateName] = data;
      },

      localStorageAvailable: function() {
       try {
          return 'localStorage' in window && window['localStorage'] !== null;
        } catch (e) {
          return false;
        }
      },

      saveLocalTemplates: function() {
        if (this.localStorageAvailable) {
          localStorage.setItem("templates", JSON.stringify(this.templates));
          localStorage.setItem("templateVersion", this.templateVersion);
        }
      },

      loadLocalTemplates: function() {
        if (this.localStorageAvailable) {
          var templateVersion = localStorage.getItem("templateVersion");
          if (templateVersion && templateVersion == this.templateVersion) {
            var templates = localStorage.getItem("templates");
            if (templates) {
              templates = JSON.parse(templates);
              for (var x in templates) {
                if (!this.templates[x]) {
                  this.addTemplate(x, templates[x]);
                }
              }
            }
          }
          else {
            localStorage.removeItem("templates");
            localStorage.removeItem("templateVersion");
          }
        }
      }



    };
    templateLoader.loadLocalTemplates();
    window.templateLoader = templateLoader;
  })();

调用它看起来是这样的：

Calling it would look something like:

      templateLoader.loadRemoteTemplate("test_template", "templates/test_template.txt", function(data) {
        var compiled = _.template(data);
        $('#content').html(compiled({name : 'world'}));
      });

这是我原来的答复

下面是我写的一个方法 ICanHaz （胡子）执行出于同样的原因这个确切功能。

Here is a method I wrote for ICanHaz (mustache) that performs this exact function for the same reason.

window.ich.loadRemoteTemplate = function(name, callback) {
  if (!ich.templates[name+"_template"]) {
    jQuery.get("templates/"+name+".mustache", function(data) {
      window.ich.addTemplate(name+"_template", data);
      callback();
    });
  }
  else {
    callback();
  }
}

我然后调用它像这样：

I then call it like so:

ich.loadRemoteTemplate(page+'_page', function() {
  $('#'+page+'_page').html(ich[page+'_page_template']({}, true));
});

这篇关于异步加载下划线模板的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！