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

前端之家收集整理的这篇文章主要介绍了在Javascript中动态创建HTML内容的替代解决方案前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在开展一个网络项目. (绝对没有以前的经验).
该项目需要动态地从服务器检索大量内容(如点击按钮).
现在,问题是,我必须以一些整洁,格式化的方式显示内容.比如,可折叠列表,超链接等.我目前正在使用JavaScript.像这样:

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

我还需要根据Bootstrap的要求在JavaScript中为那些动态创建的元素添加适当的类.
但是代码现在看起来非常混乱.是否有任何替代解决方案可以避免JS中的所有元素的动态创建,格式化等?

最佳答案
对于knockoutJS解决方案来说,这似乎是一个完美的场景.我刚刚在live example发布了示例代码.

你只需要创建这样的模板 –

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

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

// 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,只需要获取/设置数据.

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

猜你在找的CSS相关文章