我打算使用backbone.js和underscore.js来创建网站,我将会有很多下划线的模板：
<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>
当然我的模板会更复杂一些.
由于我会有很多,因此我不想在页面加载时加载所有模板.我想找到一个解决方案,在那里我可以加载特定的模板,只有当它将被使用.
另一件事是,我的大多数模板将具有相同的结构,只有< p id =“form”>< / p> < p id =“dynamic_date”>< / p>内容会有所不同.
可以请你建议我该怎么办？
谢谢,
解决方法
编辑：我做了一些研究,移植了我的iCanHaz代码来强调它也使用localStorage可用
这是一个github仓库：https://github.com/Gazler/Underscore-Template-Loader
代码是：
(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;
})();
调用它会像：
templateLoader.loadRemoteTemplate("test_template","templates/test_template.txt",function(data) {
var compiled = _.template(data);
$('#content').html(compiled({name : 'world'}));
});
这是我原来的答案
这是我为ICanHaz(胡子)编写的一种方法,它执行这个确切的功能是出于同样的原因.
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();
}
}
我就这么称呼：
ich.loadRemoteTemplate(page+'_page',function() {
$('#'+page+'_page').html(ich[page+'_page_template']({},true));
});
