Javascript - HTML连接的替代方案[重复]答案

【问题标题】：Javascript - Alternative to HTML concatenation [duplicate]Javascript - HTML连接的替代方案[重复]
【发布时间】：2012-01-21 09:30:10
【问题描述】：

可能重复：
JavaScript: How should I generate a lot of HTML?

我觉得做这样的事情真的很愚蠢：

var html = '<div><ul>';
for(var i=0; i<10; i++) {
   html += '<li>' + i + '</li>';
}
html += '</ul></div>';
$("body").html(html);

难道没有办法使用模板而不是像那样连接字符串吗？我知道可以选择使用 JS 填充现有元素，并在它们需要出现时更改显示以阻止它们，但这似乎相当不便和烦人，尤其是在使用循环时。

我也愿意接受任何前端模板/框架建议。

这个问题可能以前被问过，但我找不到任何关于 SO 的线索。任何见解将不胜感激。

编辑：

澄清一下，我会对这样的事情感兴趣：

// li_list.haml
%div
   %ul
      - for i in #{range}
         %li i

// app.js
// require li_list.haml with {range: 10}

【问题讨论】：

“一种使用模板的方法”？你的意思是？您真正想在这里解决什么问题？
为什么不能在服务器上执行此操作（通过服务器页面）？
您可以在服务器端创建 HTML 源代码。那会更合适。
JavaScript 模板引擎已在 stackoverflow.com/questions/552934/… 中讨论过。
@SliverNinja 我需要异步数据。

标签： javascript html templates concatenation

【解决方案1】：

你当然可以使用模板，但这需要一个外部库。

我个人喜欢KnockoutJs，它具有模板、与 dom 的双向绑定以及其他优点。这是他们的demo on templating

【讨论】：

+1 用于 KnockoutJs，并查找使用 jQuery 模板机制的模板部分...
jQuery templates 现在不是已弃用了吗？
我听说过 KO 的好东西，顺便说一句，你知道 Backbone 也有类似的东西吗？
@Silver - 据我了解，jQuery 模板已被弃用，但 Knockout 将其合并到他们的库中
@sombe - 我对骨干一无所知，抱歉。（我的猜测是它与 KO 无关）

【解决方案2】：

我知道它没有被标记，但你的问题看起来正在使用它：jQuery 在他们的 API 文档中列出了一个 tmpl plugin。

对于非 jquery 解决方案，Jon Resig 有一个 great article about his micro-templating technique。

最后，如果你只是简单地连接一堆东西，数组可以创造奇迹：

代替：

var html = '<div><ul>';
for(var i=0; i<10; i++) {
   html += '<li>' + i + '</li>';
}
html += '</ul></div>';
$("body").html(html);

你可以使用：

var html,
    i;
html = ['<div><ul>'];
for (i = 0; i < 10; i += 1) {
    html.push('<li>', i, '<li>')
}
html.push('</ul></div>');
$('body').html(html.join(''));

差别不大，但至少可以进行数组操作。

【讨论】：

【解决方案3】：

试试Prototype Template。

您可能还想试试Closure JS templates。

【讨论】：