为JQuery推荐的JavaScript HTML模板库?
任何build议的HTML模板库将与JQuery良好? 谷歌search了不less图书馆,但我不确定是否有一个经得起时间考验的公认的图书馆。
那么坦率地说,现在客户端的模板是非常热的,但相当的丛林。
最受欢迎的是,我相信:
- 纯粹的 :它只使用js,而不是他自己的“语法”
- 小胡子 :挺稳定,很好听的。
- jqote2 :根据jsperfs非常快
- jQuery的模板(不推荐):
有很多其他的,但你必须testing他们,看看最适合你,你的项目风格。
就我个人来说,我很难添加一个新的语法和逻辑( 混合逻辑和模板,你好? ),并去纯js。 我的模板中的每一个都存储在它自己的html文件(./usersTable.row.html)中。 我只在使用AJAXing内容的时候才使用模板,而且我有几个“逻辑”的js文件,一个用于表格,一个用于div,一个用于列表。 甚至没有一个select的选项(我用另一种方法)。
每次我试图做一些更复杂的事情时,我发现代码不太清晰,花了更多的时间来稳定,而不是“老”的方式。 在我看来,模板中的逻辑是完全没有意义的,添加它自己的语法只会添加非常难以追踪的错误。
jTemplates
JavaScript的模板引擎。
插件到jQuery …
特征:
- 100%的JavaScript
- precompilator
- 支持JSON
- 使用Ajax
- 允许使用模板内的JavaScript代码
- 允许构build级联模板
- 允许在模板中定义参数
- 实时刷新! – 从服务器自动更新内容…
这里有一个合理的讨论文件,涵盖了一系列的模板工具。 虽然不是特定于jQuery的。
由微软创build的jQuery模板插件 ,并被接受为官方的jQuery插件。
但请注意 ,现在已经弃用了。
我会检查出json2html ,它放弃不得不编写HTML片段,而是依靠JSON转换将JSON对象数组转换为非结构化列表。 非常快,并使用DOM创build。
几年前,我build立了IBDOM: http ://ibdom.sf.net/ | 截至2009年12月,它支持jQuery绑定,如果你直接从干线。
$("#foo").injectWith(collectionOfJavaScriptObjects);
要么
$("#foo").injectWith(simpleJavaScriptObject);
另外,现在可以将所有“data:propName”标记放在class =“data:propName other classnames”属性中,这样就不必使用这些标记来清理应用程序的内容。
我还没有更新那里的一堆文档,以反映我最近的增强function,但自2007年以来,我已经有了这个框架的各种版本。
对这个问题持怀疑态度:
当微软用IE5发明了我们现在知道的XmlHttpRequest和“ajax”模式时,这个承诺的一部分就是在Web浏览器和服务器之间纯粹交换数据。 这些数据将被封装在XML中,因为在1999/2000年,XML只是非常热门。 除了使用callback机制通过networking检索xml文档之外,MS的MSXML ActiveX组件还支持我们现在称为XSL-T和XPath的草案实现。
结合检索HTTP / XML,XPath和XSL-T,为开发人员提供了巨大的创造力,可以构build“应用程序”,纯粹发送,更重要的是从服务器检索数据的丰富“文档”。
为什么这是一个有用的模式? 这取决于您的用户界面有多复杂,以及您对可维护性的关心程度。
当使用高级CSS构build一个视觉上非常丰富的语义标记界面时,最后一件事情就是将标记块分成“小控制器/视图”,这样就可以将.innerHTML文档片段放入主文件,这是为什么。
保持高级html / css用户界面易于pipe理的一个关键原则是至less在其开发活动阶段保持其validation。 如果您的标记validation,您可以专注于您的CSS错误。 现在,如果在用户交互的各个阶段,标记的碎片最终被注入,那么pipe理就变得非常困难,整个事情变得脆弱。
这个想法是把所有的标记UI结构都放在一个单独的文档中, 只通过networking检索数据 ,然后使用一个坚实的框架,这个框架至less简单地将数据注入到标记结构中,并且使用最复制的标记结构你标记为可重复的。
在IE5 +中使用XSL-T和XPath是可能的,但实际上没有其他浏览器。 一些F / OSS浏览器框架已经涉足XPath,但这还不是我们可以依赖的东西。
那么实现这种模式的下一个最好的事情是什么? IBDOM。 从您的服务器获取数据,将其注入到您的文档中。 毫不费力。
你应该看看Javascript模板,这是一个在着名的jQuery File Upload插件中使用的小模板引擎,由同一作者Sebastian Tschan(@blueimp)开发,
https://github.com/blueimp/JavaScript-Templates
按照 Sebastian 的使用指南 ,只要删除这一行
document.getElementById("result").innerHTML = tmpl("tmpl-demo", data);
用这个replace它
$('#result').html(tmpl('tmpl-demo', data));
别忘了在HTML文件中添加div结果标签
<div id="result"></div>
请享用