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

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

并创建 View 模型然后应用它 -

// 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 等。 你永远不需要担心渲染 ui，只需 get/set 数据。

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