Question

我有一种情况，我需要处理一个JSON加载，并且对于每个“数据”项，在页面上将其作为列表项输出。这很好，但我知道这样做的正确方法。

例如，我只能想到的一种方法是：

$.each(json.data, function(key, value) {
   $('ul').prepend("<li><div class='name'>" + value.name + "</div>...<li>");
});

现在这样可行，但是如果我有多层div和其他元素，它就会变得混乱。我可以通过多线程使代码看起来更好，但这仍然是维护它的可怕方法。

我如何解决这个问题，并正确地做到/出现？

我加载了另一个文件中的模板，然后将HTML /文本分配给特定元素？

Answer 1

基本上构建一个模板，以减少实际附加到dom的频率。您可以像这样编写相同的代码片段，并且可以期望它更好地进行预编码。只需在本地连接字符串并立即将其全部注入。

var html = "", value;
for(var i = json.data.length - 1; i >=0; i--) {//same as prepending (or reverse the list)
    value = json.data[i];
    html += "<li><div class='name'>" + value.name + "</div>...<li>";
}
$('ul').prepend(html);

重读你的代码片段我无法判断json.data是对象还是数组。对于一个对象，你的原始方法很好：

$.each(json.data, function(key, value) {
   html += "<li><div class='name'>" + value.name + "</div>...<li>";
});

大多数模板框架提供了一种很好的，最小化的方法来构建相同的html字符串。如果您对在特定框架中执行此操作有疑问，请拍摄。

Answer 2

您可能需要查看Mustache.js或Handlebars.js来制作客户端模板。使用把手的一个小例子：

<!-- Because of the 'type' attribute, the browser won't try to execute
     this as it were javascript -->
<script type="text/x-handlebars-template" id="result-template">
   <ul>
    {{#each results}}
      <li>
        <div class='name'>{{name}}</div>
        <div class='age'>{{age}}</div>
      </li>
    {{/each}}
  </ul>
</script>

用于渲染：

var source = $("#result-template").html();
var template = Handlebars.compile(source);

// The 'template' function returns the rendered HTML
var ul = $(template({results: jsonData}));

ul.appendTo("body");

工作示例：http://jsbin.com/ESIKiDoK/1/edit

jQuery：在循环中添加新的复杂HTML列表项

2 个答案: