关于哪个HTML模板库与JQuery相处得好的任何建议?谷歌搜索引发了相当多的图书馆,但我不确定是否有一个经过充分认可的图书馆经得起时间的考验。
答案 0 :(得分:58)
嗯,坦率地说,客户端模板现在非常热门,但是相当丛林。
最受欢迎的是,我相信:
有很多其他人,但你必须测试它们,看看哪种适合你,以及你的项目风格,最好。
就个人而言,我很难添加新的语法和逻辑集(混合逻辑和模板,hello ?? ),并且变成了纯粹的js。我的每个模板都存储在自己的html文件(./usersTable.row.html)中。我只在ajaxing内容时使用模板,并且我有几个“逻辑”js文件,一个用于表,一个用于div,一个用于列表。甚至没有一个选择的选项(我使用另一种方法)。
每当我尝试做一些更复杂的事情时,我发现代码不太清楚,并且花了我更多的时间来稳定而不是以“旧”方式做。在我看来,模板中的逻辑是完全没有意义的,并且添加它自己的语法只会添加非常难以跟踪的错误。
答案 1 :(得分:14)
JavaScript的模板引擎。
插件jQuery ...
特点:
- 100%的JavaScript
- precompilator
- 支持JSON
- 使用Ajax
- 允许在模板
中使用JavaScript代码- 允许构建级联模板
- 允许在模板中定义参数
- 直播刷新! - 从服务器自动更新内容......
答案 2 :(得分:8)
关于此主题here有一个合理的讨论文件,其中涵盖了一系列模板工具。但不是特定于jQuery。
答案 3 :(得分:5)
jQuery Templates Plugin,并被接受为官方jQuery插件。
但请注意现在已弃用。
答案 4 :(得分:4)
我会查看json2html,它放弃了编写HTML片段,而是依赖JSON转换将JSON对象数组转换为非结构化列表。非常快,并使用DOM创建。
答案 5 :(得分:3)
几年前我建立了IBDOM:http://ibdom.sf.net/ |截至2009年12月,它支持jQuery绑定,如果你从主干直接得到它。
$("#foo").injectWith(collectionOfJavaScriptObjects);
或
$("#foo").injectWith(simpleJavaScriptObject);
此外,您现在可以将所有“data:propName”标记放在class =“data:propName other classnames”属性中,这样您就不必使用这些标记来丢弃应用程序的内容。
我还没有在那里更新一堆文档来反映我最近的增强功能,但是自2007年以来我已经在生产中使用了这个框架的各种版本。
怀疑这个问题:
回到微软发明IE5时我们现在所知的XmlHttpRequest和“ajax”模式,这背后的承诺的一部分是纯粹在Web浏览器和服务器之间交换数据。这些数据将封装在XML中,因为在1999/2000年,XML只是非常热门。除了使用回调机制通过网络检索xml文档之外,MS的MSXML ActiveX组件还支持我们现在所知的XSL-T和XPath的草案前实现。结合检索HTTP / XML,XPath和XSL-T,为开发人员提供了巨大的创造力,可以构建丰富的“文档”,表现为“应用程序”,纯粹发送,更重要的是,从服务器检索数据。
为什么这是一个有用的模式?这取决于您的用户界面的复杂程度,以及您对其可维护性的关注程度。
当使用高级CSS构建一个视觉上非常丰富的语义标记界面时,你要做的最后一件事是将标记块分成“迷你控制器/视图”,这样你就可以.innerHTML一个文档片段进入主文档,这就是原因。
保持高级html / css用户界面易于管理的一个关键原则是至少在其活动的开发阶段保留其验证。如果您的标记验证,您可以专注于您的CSS错误。现在,如果在用户交互的各个阶段注入标记的片段最终会被注入,那么管理它们变得非常笨拙,整个事情变得脆弱。
我们的想法是将所有标记UI构造放在一个文档中,通过网络检索 ONLY DATA ,并使用一个坚固的框架,它至少会将您的数据注入到您的网络中标记构造,以及您标记为可重复的最复制标记构造。
这可以在IE5 +中使用XSL-T和XPath,但几乎没有其他浏览器。一些F / OSS浏览器框架一直在涉及XPath,但它还不是我们可以依赖的东西。
那么实现这种模式的下一个最佳方法是什么? IBDOM。从服务器获取数据,将其注入文档中。毫不费力。
答案 6 :(得分:2)
你应该看看Javascript-Templates,这是一个在着名的jQuery文件上传插件中使用的小模板引擎,由同一作者Sebastian Tschan(@blueimp)开发
https://github.com/blueimp/JavaScript-Templates
按照Sebastian的使用指南,删除此行
document.getElementById("result").innerHTML = tmpl("tmpl-demo", data);
将其替换为
$('#result').html(tmpl('tmpl-demo', data));
不要忘记在您的HTML文件中添加div结果标记
<div id="result"></div>
享受