在Javascript中动态创建HTML内容的替代方案

Question

我正在开发一个网站项目（完全没有之前的经验）。 这个项目需要从服务器动态检索大量内容（例如点击按钮时）。 现在的问题是，我必须以一些整齐、格式化的方式来显示这些内容。例如可折叠列表、超链接等等。我目前正在使用JavaScript来实现这个目的，就像这样：

li = document.createElement("li");
li.innerHTML = "some_content";

我需要根据Bootstrap的要求，在JavaScript中为动态创建的元素添加适当的类。但现在代码看起来非常混乱。有没有避免JS动态创建元素和格式化等问题的替代方案？

- user4444

---

听起来你正在寻找一个模板引擎（也许还有其他东西）？也许可以查看一下这个页面，选择各种模板选项：http://garann.github.io/template-chooser/ - bvaughn

如果您只针对现代浏览器，请尝试使用 HTML Templates https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template - Bikas

你可以直接使用jQuery的方式，因为你正在使用bootstrap：$("<li>") - Patrick Gunderson

Answer 1

似乎这是一个完美的knockoutJS解决方案场景。我在此发布他们实时示例中的样本代码。

你只需像这样创建模板 -

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>

（注意data-bind中的绑定）

创建视图模型并应用它 -

// Here's my data model
var ViewModel = function(first, last) {
    this.firstName = ko.observable(first);
    this.lastName = ko.observable(last);

    this.fullName = ko.pureComputed(function() {
        // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
        return this.firstName() + " " + this.lastName();
    }, this);
};

ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work

并且你可以在几分钟内用这个输出，非常方便。

我用它创建了一个调查生成器页面，最重要的是knockout很快，并且还支持各种js库的使用，例如jQuery、AngularJS等。您永远不必担心UI渲染，只需使用数据进行获取/设置即可。

在这里尝试一下 - http://jsfiddle.net/rniemeyer/LkqTU/

- brainless coder

---

即使是 knockout 也对他所描述的问题过于复杂了。 - Patrick Gunderson

Answer 2

你可以尝试一些前端框架，例如：AngularJS（如之前评论所述）。它具有内置的模板引擎（如评论中所提到），因此如果你使用angular，你的代码将如下所示。

<ul>
  <li ng-repeat="user in users">{{user.name}}</li>
</ul>

而你的json可能是这样的

{
  "users":[
     {
        "name":"jack",
        "age":18
     },
     {
        "name":"jimmy",
        "age":19
     }
  ]
}

用户看到的HTML将是：

<ul>
  <li>jack</li>
  <li>jimmy</li>
</ul>

我没有编写Angular的控制器代码，因此上面的代码仅供演示，您可以查看它的文档和教程。

Angular是一个MV*前端框架，当您需要在前端显示大量数据时，它非常有用。（但是过多的数据会导致性能问题，因为它使用双向数据绑定，请尝试bindonce）

如果您不想使用框架，可以尝试mustache。

- at15

---

在较新版本的AngularJS中，bindonce功能已经内置到框架中。据我所知，pasvaz的模块不再必要。 - Aaron Greenwald

Answer 3

您可以使用模板解决方案，例如underscore templates，Handlebars或（最佳）JADE。每个模板解决方案都可以与更大的框架（如angular或ember）一起使用，但也可以作为独立的模板解决方案使用。

由于您正在使用bootstrap，因此还在使用jQuery。

使用jQuery，您可以像这样添加元素、更新其内容并添加类：

var $li = $("<li>") // create the li element
    .text("My Text") // add a text node
    .addClass("class1 class2 class3") // add some classes
    .appendTo($("ul#myList")); // insert into your ul

以下也是允许的，如果您更喜欢一行代码：

var $li = $("<li class='class1 class2 class3'>My Text</li>")
    .appendTo($("ul#myList"));

以上两者都需要这个：

<ul id="myList"></ul>

并将其转换为这样：

<ul id="myList"><li class='class1 class2 class3'>My Text</li></ul>

- Patrick Gunderson

---

这不是一个坏主意。它们做不同的事情。 - Patrick Gunderson

Answer 4

编辑：

虽然已经有一段时间了，但我发现Gatsy非常容易上手。我已经在几个项目中使用过它。

---

Angular是另一个选择，取决于网站的复杂程度（由Google支持）。

Ember也是一个很好的选择。

根据您的技能和网站类型，PHP也可能是一个简单的替代方案。

- rjgrazioli

---

这些框架对于简单的模板来说过于复杂了。 - Patrick Gunderson

我同意..."取决于网站的复杂程度"。 - rjgrazioli