我正在创建一个页面,旨在用作 Awesomium 的 GUI 控件。在此页面中,我想要一个列表,其内容在运行时由应用程序控制。
Awesomium 允许将网页渲染到缓冲区,例如,在 3D 应用程序中绘制为对象的纹理,因此没有“服务器”来运行服务器端代码,并且“GUI”之间的通信' 并且应用程序几乎完全通过 Javascript 函数调用和回调完成。
列表将由多个 <div>
组成s,每一个都相对复杂,所以我想为一个可以填充并添加到列表中的条目创建一个模板。
到目前为止,我一直在做类似的事情:
function refresh() {
contentpane.innerHTML = '';
var i = 0;
for (i = 0; i < page.contentlist.length; i++) {
contentpane.innerHTML += '<div id=\'' + page.contentlist[i] + '\'class="button" onclick=page.callback("clicked",id) > <img src="\screenshot.jpg"/> <label ></label> </div>';
}
}
但是我的列表条目越复杂,它就越难处理,所以我认为必须有更好的方法。
在 Javascript 函数中创建模板化项列表的最简单方法是什么?
我可以使用类似 WPF 的 DataTemplate 系统吗?
最佳答案
Underscore.js 有一个 template engine你可以看看。您还可以将模板放入单独的文件中,并在需要时通过 ajax 加载它们。
假设您有以下模板:
<script type="text/template" id="tmpl-listentry">
<div id='<%= content %>' class="button" onclick='page.callback("clicked",id)'>
<img src="/screenshot.jpg" />
<label></label>
</div>
</script>
您可以在加载它并将其附加到您的文档后像这样使用它:
function refresh() {
var i = 0,
tmplElem = document.getElementById('tmpl-listentry'),
compiled = _.template(tmplElem.innerHTML);
contentpane.innerHTML = '';
for (i = 0; i < page.contentlist.length; i++) {
contentpane.innerHTML += compiled({content: page.contentlist[i]});
}
}
注意:当然,您应该缓存已编译的模板,而不是在每次刷新时都对其进行编译。
关于javascript - 如何使用 Javascript 在网页上创建一个列表,其中每个元素都基于模板?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9220157/