Question

我想要实现的是为需要在单独的js文件中动态生成的所有内容存储HTML模板（而不是在页面中呈现它）。

buildHtml函数当前设置如何正常工作。我被困的地方是如果..我在模板对象中的另一个变量说'input3'并且它的标记类似于<div>(exact markup from commonInput)</div>

我尝试将其用作input 3 : '<div>' + this.commonInput + '</div>'，但事实证明您无法使用this (explained here)从内部引用对象属性。

我可以使用完整的html创建'input3'但是对于大的html块，这种方法不是很有用。

寻找

解决此特定问题
这种方法是个坏主意的原因

更好的替代方案

$j(document).ready(function() {

var namespace = window.namespace || {};
namespace.feature = namespace.appName || {};

namespace.feature.templates = {

input1  :   '<div>'+
                '<p class="abc">Hey {username}</p>'+
            '</div>',

input2  :   '<div>'+
                '<div class="description">{description}</div>'+
            '</div>',

commonInput :   '<div class="common">Common code</div>'

};

namespace.feature.module = function() {

var container  = $j('#container'),
    t = namespace.feature.templates;

var buildHtml = function(type) {
    var tmpHtml = t.input1 + t.commonInput + t.input2;
    container.append(tmpHtml);
}

var init = function() {
    buildHtml();
}

return {
    init : init,
};

}();

namespace.feature.module.init();

});

Answer 1

我不确定你的确切问题是什么，但就更好的选择而言，我建议使用jQuery模板。

以下是所有不同模板引擎及其效果的基准页面：http://jsperf.com/dom-vs-innerhtml-based-templating

您可以查看修订版以查找不同的引擎组合，并在不同的浏览器上运行它们以查看速度差异。

更新：原始jquery模板项目不再处于活动状态。这是旧项目的新家：https://github.com/BorisMoore/jquery-tmpl

我不再推荐jquery-templates，因为现在有更多更好的选择。我最后一次检查，dustJs by linkedIn fork似乎是最有希望的。

Answer 2

就在我的头顶。

您可以将模板编写为构建字符串的函数。

input3 : function(param) {
    return '<div>' + param + '</div>'
}

然后：

var tmpHTML = t.input1 + t.input2 + t.input3(t.commonInput);

另外，我喜欢在构建HTML时构建自己的DOM对象。并避免使用硬编码字符串。

<强> http://mg.to/2006/02/27/easy-dom-creation-for-jquery-and-prototype

JavaScript文件中的HTML模板......我做错了什么？

2 个答案: