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

Question

我正在做一个网络项目。(绝对没有以前的经验)。这个项目需要从服务器检索动态大量的内容(如点击按钮)。现在，问题是，我必须以某种整洁、格式化的方式显示内容。例如，可折叠列表，超链接等。我目前正在使用JavaScript来实现这一目的。如下所示：

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

根据Bootstrap的要求，我还需要在JavaScript中为那些动态创建的元素添加适当的类。但是现在代码看起来真的很乱。有没有什么替代方案可以避免在JS中动态创建元素、格式化等？

Answer 1

对于knockoutJS解决方案来说，这似乎是一个完美的场景。我只是从他们的live example在这里发布了一个示例代码。

您只需像这样创建模板-

<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>

(注意数据绑定中的绑定)

并创建视图模型，然后应用它-

// 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

您可以使用此输出，只需几分钟的时间。

​

我用它创建了一个Survey Builder页面，最重要的部分是knockout是快速的，并且还支持各种js库，比如jQuery, AngularJS, etc.，你永远不需要担心渲染ui，只需要使用数据的get/set。

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

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

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>