Question

我正在构建一个显示用户信息的Django应用程序，我希望将用户访问量最大的网站显示为一个简单的项目列表。

要做到这一点，我目前正在使用Django的模板系统迭代网站列表：

<ul>
{% for w in top_websites %}
  <li>{{w}}</li>
{% endfor %}
</ul>

然而，由于一些原因（我想在以后将应用程序切换到Rails，所以尽可能避免在我的html中使用特定于Django的功能;我的页面上的Javascript已经收到了一个完整的json，包含有关用户的所有信息，因此最好用它来生成顶级网站），我想避免使用Django模板，而只是在Javascript中这样做。

最好的方法是什么？

我知道我可以在jQuery中执行此操作：

for (var i = 0; i < topWebsites.length; i++) {
  $("ul#top_websites").append("<li>" + topWebsites[i] + "</li>")};
}

但这有点像哈克。有没有更好的办法？这是Backbone和AngularJS之类的框架（我之前不太了解并且之前没有使用过）是什么？

Answer 1

您可以使用templating library。但是，如果这是你唯一需要做的事情，使用库可能会有点过分。

你应该尽可能地避免dom回流，所以不要在DOM中逐个添加<li>，而是可以生成整个标记并执行$("ul#top_websites").html(markup)或者你可以使用{DocumentFragment 1}}。

var frag = document.createDocumentFragment();

$.each(topWebSites, function (index, item) {
    $('<li>').html(item).appendTo(frag);
});
$("ul#top_websites").append(frag);

修改

@RichardNeilIlagan提出了一个关于在每次迭代中使用clone vs解析<li>的问题。这是一个显示一些有趣结果的performance test：clone似乎是最慢的方法。为简单起见，因为您可能没有很长的元素列表，$('<li>')就可以了，但使用本机克隆会更快$(li.cloneNode(false))。但是，如果你正在寻找更好的表现，我根本不会使用jQuery ......

Answer 2

Backbone和Angular等MVVM库允许您在视图表单（例如，HTML标记）中表示您的数据（出于此答案的目的，我们将top_websites）。因此，您绝对可以使用它们以更清晰，更模块化的方式将JS对象数据“转换”为HTML标记。

尽管我建议你使用一个好的MVVM库，但是当你对这个范例不熟悉时（例如你并不熟悉框架）它可能会令人生畏，而且它不会阻止你在普通JS中自己做映射。上面的@plalx说明了一种相当不错的方法。

在Javascript中添加一系列表示用户模型属性的<li>标签</li>

2 个答案: