1

我有一个动态创建的列表，但每个元素都是一个相当大的 HTML 块，具有通用结构和一些变量。
用 jQuery 做这件事的最好方法是什么？

4

5 回答 5

2

在客户端处理大量 HTML 的一种方法是使用模板系统。如果你想让它以 jQuery 为中心，那么 jQuery 模板是一种选择，但我相信它已经停止使用。

我在Underscore 模板方面取得了很大的成功，它们快速且易于使用。

于 2012-05-02T13:11:47.073 回答
1

我将回应 CambridgeMike 和 Simon Smith 所说的“使用模板库”，除了我会插入一个不同的并且我认为更好的一个。使用Handlebars.js。它与 Ember.js 选择的相同，它非常适合独立使用，并且与 Backbone.js 搭配得很好。

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

于 2012-05-02T13:22:27.577 回答
1

不确定这对您来说是否过分，但也许可以查看模板库。

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/

于 2012-05-02T13:10:11.483 回答
0

利用数组的连接方法（将元素连接成字符串）是我最喜欢的方法。将它与 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 包装。这样，您放入 values 对象中的键都是可选的，并且在未提供时不会留下空白 LI。

在格式化大块 HTML 时，split/join 是您的朋友，并且通常具有强大的实用程序。另一个方便的用途是从现有的一组值构建列表或表格行：

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

您也可以在此基础上将二维数组自动转换为表格。学习一些正则表达式（可以用来代替 split 方法中的字符串），在 HTML 不统一的情况下，您可以轻松地从 HTML 转换回纯数据数组和对象。

于 2012-05-02T14:26:03.687 回答
-1

我会使用jQuery 模板。

使用 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 是一种非常易于使用的数据传输语言。

于 2012-05-02T13:20:59.947 回答