【问题标题】：What is the good way of writing tons of HTML code with jQuery?用 jQuery 编写大量 HTML 代码的好方法是什么？
【发布时间】：2013-05-26 01:39:13
【问题描述】：

我正在一个 Django 项目中使用 jQuery 动态编写几个 HTML 表单。这就是我现在的做法：

function WriteSomeRandomContent() {
    var sContent = "<h3>foobar</h3>";
    sContent += "<br />";
    sContent += "<p>Gosh ! This is a lot of HTML content !</p>";
    ...
    sContent += "<p>For real dude I have to do it within decades of lines !</p>";
    $("#foobar").html(sContent);
}

我想要做的是通过使用某种 HTML 模板从我的 JavaScript 函数中删除丑陋的 HTML 代码，然后我可以在我的 sContent 变量中包含。

有没有办法做到这一点，或者有更好的方法来处理 JavaScript 中的大量 HTML 代码？

编辑

可能重复：load jQuery-Templates from external file?

【问题讨论】：

最好的办法是不要这样做。
为什么需要在 javascript 中处理大量 HTML 代码？你不能编辑服务器的输出吗？
您可以使用 AJAX 从服务器中检索模板，并将其放在字符串中，然后进行变量替换。处理向现有页面添加大量 HTML 的最佳方法是通过一个看似巨大的字符串，而不是添加每个节点的个性。
@RobinCastlin 我正在移植一个桌面应用程序，它有几个菜单按钮，可以将相应的内容写入#content-right。所以我需要调用一个给定的 JavaScript 函数，它会相应地填充我的<div>。
阅读这篇ejohn.org/blog/javascript-micro-templating

标签： javascript jquery jquery-plugins

【解决方案1】：

是的，肯定会使用某种模板，例如 underscore.js 提供了一种称为模板的方法

<script id="listItem" type="text/template">
    <h3>{{ dynamic_text }}</h3>";
     <br />
    <p>Gosh ! This is a lot of HTML content !</p>
    <p>For real dude I have to do it within decades of lines !</p>
</script>

然后使用诸如骨干.js 和下划线之类的东西你可以做到这一点。

App.Views.ListItem = Backbone.View.extend({
   tagName: 'li',
   template: _.template($('#listItem')),
   render: function(){
      //binds the model data to our template and then appends it to our view (ex: li )
      this.$el.append( this.template( this.model.toJSON ) );
      return this;
   }
});

您还可以添加一个模板帮助方法，通过这样做让事情变得更简单

window.template = function(id){
   return _.template($('#' + id));
}
//template: template('listItem')

【讨论】：

【解决方案2】：

Dust.js、Handlebars.js、jquery 模板...和许多其他类似的东西..

谷歌他们..

【讨论】：

根据我的搜索和发现，这些插件对我来说看起来太强大了，无法实现我想要实现的目标。目前正在研究 Handlebars.js。另外，我可以在 Django 项目中使用{{ }} Handlebars 符号吗？编辑：是的，使用{% verbatim %}。

【解决方案3】：

使用 JavaScript 模板。 AngularJS、Ember 之类的东西。

【讨论】：

angularjs 非常适合做模板。