javascript - 在 Javascript 中添加一系列表示用户模型属性的 标签

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>")};
}

但这感觉有点hacky。有没有更好的办法？这就是像 Backbone 和 AngularJS 这样的框架(我对此不太了解，也没有使用过)的用途吗？

Answer 1

您可以使用 templating library 。但是，如果这是您唯一要做的事情，那么使用库可能就有点矫枉过正了。

您应该始终尽可能避免 dom 回流，因此不要附加 <li>在 DOM 中一一生成，您可以生成整个标记并执行 $("ul#top_websites").html(markup)或者你可以使用DocumentFragment .

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>')很好，但是使用 native 克隆速度更快 $(li.cloneNode(false)) 。但是，如果您正在寻找更好的性能，我根本不会使用 jQuery...