我正在做一个网络元素。 (绝对没有以前的经验)。
该元素要求动态地从服务器检索大量内容(如单击按钮一样)。
现在,问题是,我必须以某种简洁,格式化的方式显示内容。像可折叠列表,超链接等。我目前正在为此目的使用JavaScript。像这样:

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

我还需要根据Bootstrap的要求向JavaScript中那些动态创建的元素添加适当的类。
但是代码现在看起来真的很凌乱。是否有其他解决方案来避免在JS中动态创建元素,格式化等?

最佳答案

似乎是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页面,最重要的部分是敲除速度快,还支持各种js库,像jQuery, AngularJS, etc.一样工作。您将不必担心渲染ui,只需要为get/set加上数据即可。

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

关于javascript - 在Javascript中动态创建HTML内容的替代解决方案,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29336462/

10-10 18:40
查看更多