0

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

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

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

现在这可行，但是如果我有多层 div 和其他元素，它只会变得一团糟。我可以通过对它进行多行处理来使它在代码中看起来更好，但这仍然是一种糟糕的维护方式。

我如何解决这个问题并正确地做/展示它？

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

4

2 回答 2

2

基本上构建一个模板，这样您就可以减少实际附加到 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 字符串。如果您对在特定框架中执行此操作有疑问，请拍摄。

于 2013-11-13T16:24:47.117 回答
1

你可能想看看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

于 2013-11-13T16:29:24.463 回答