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