Question

我有一个动态创建的列表，但每个元素都是一个非常大的HTML块，它具有一个共同的结构和一些变量。
用jQuery做最好的方法是什么？

Answer 1

在客户端处理大量HTML的一种方法是使用atemplate系统。如果你想保持它jQuery中心then jQuery templates是一个选项，但我相信它已经被取消了。

我已经取得了很多成功with Underscore templates，这些都很快且易于使用。

Answer 2

不确定这对你来说是否过度，但可能会查看一个模板库。

https://github.com/janl/mustache.js我听说真的很好（个人没有用过）。

我使用了Underscore.js

中的那个

后者看起来像这样......

var myTemplate = _.template("<div>This is my reusable block with {{ count }} variables");

$.each([1,2,3,4], function(elm, i){
  $('body').append(myTemplate ({count: elm}));
})

这是一个jsfiddle示例http://jsfiddle.net/K8VHb/

Answer 3

我会回应一下CambridgeMike和Simon Smith所说的“使用模板库”，除了我将插入一个不同的，我认为更好的一个。使用Handlebars.js。它与Ember.js选择的相同，它是独立的，它与Backbone.js配对也很好。

这是你可以使用很长时间的东西。

Answer 4

利用数组的连接方法（将元素连接成字符串）是我最喜欢的方法。与JQ一起使用它，我从未真正理解JS模板库的吸引力。它还可以方便地以易于阅读的方式格式化HTML，而不会在JavaScript中出现换行符。我没有对此进行测试，因此可能存在语法错误。

var standardList = [
    '<li>Always here</li><!--could add a bunch more non-variable LIs here-->',
    '<li>',
    , //this is key #2 - one comma per line at the end makes counting easy
    '</li>',
    '<li>More non-variable LIs</li><!--possibly more non-variable LIs here-->',
    '<li>',
    , //this is key #6
    '</li>'
];

//you could have lots of these or an array of them dropped in from a server
var variableListItems = {
    key_2:'first Var list value',
    key_6:'second variable list value'
};

function buildFromListTemplate(valuesObj,listTemplate){
    for(var x in valuesObj){
        listTemplate[x.split('_')[1]] = valuesObj[x];

        //x.split('_') returns array ['key',<number>] for each key in object
        //so [1] gives array key
    }
    return listArray.join(''); //smooshes array into one big string
}

$('#someExistingUL').html(
    buildFromListTemplate(variableListItems, standardList)
);

注意：强大而简单的升级是处理buildFromListTemplate函数内的LI包装值。这样，你放在你的值对象中的键都是可选的，并且在没有提供时不会留下空白的LI。

在格式化大量HTML时，分割/加入是您的朋友并且通常具有强大的实用性。另一个方便的用途是从现有的一组值构建列表或表行：

var ulHtmlString = [
'<ul><li>',
    arrayOfValues.join('</li><li>'),
'</li></ul>'
].join('')

您可以在此基础上将2D阵列自动转换为表格。学习一些regEx（可以在split方法中代替字符串），在HTML不统一的情况下，您可以轻松地从HTML转换回仅数据的数组和对象。

Answer 5

我会使用jQuery templates。

使用jquery模板由两部分组成：

你的模板（通常是HTML）：

<script id="myTemplate" type="text/x-jquery-tmpl">
    <div>${text} ${otherStuff}</div>
</script>

和您的数据（通常是JSON或javascript对象）：

var data = { text: 'hello world!', otherStuff: 'foobar' };

然后您只需将数据绑定到模板

var resultingHTML = $('#myTemplate').tmpl(data);

然后将生成的HTML附加到您的DOM：

$('#someContainer').append(resultingHTML);

jQuery模板为您的模板中的条件/循环提供了很大的灵活性，例如{{if}}和{{each}}，JSON是一种非常容易使用的数据传输语言。

插入重复HTML块的最佳方法是什么？

5 个答案: