0

我正在构建一个显示用户信息的 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（我不太了解并且以前没有使用过）这样的框架的用途吗？

4

2 回答 2

2

您可以使用模板库。但是，如果这是您唯一需要做的事情，那么使用库可能是矫枉过正。

您应该始终尽可能避免 dom 重排，因此<li>您可以生成整个标记并执行$("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 问了一个关于每次迭代使用clonevs 解析的好问题。<li>这是一个性能测试，显示了一些有趣的结果：clone似乎是所有方法中最慢的。为简单起见，并且由于您可能不会有很长的元素列表，$('<li>')这很好，但使用本机克隆更快$(li.cloneNode(false))。但是，如果您正在寻找更好的性能，我根本不会使用 jQuery...

于 2013-05-11T05:40:32.413 回答
1

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

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

于 2013-05-11T05:52:24.553 回答