有没有关于哪个HTML模板库和JQuery搭配更好的建议？通过Google搜索会出现很多库，但我不确定是否有一些被广泛认可的库能经得起时间的考验。
适用于JQuery的推荐JavaScript HTML模板库是什么？
89
- Shiva
3
21假设您获取了一个包含100条记录的JSON对象。每个记录都需要生成相同的HTML片段。使用模板来生成标记比在JavaScript中生成标记更方便。这样设计师可以设计它，而不是将标记嵌入到JavaScript函数的字符串中。 - redsquare
3@cletus - 因为使用带有HTML格式的模板比一长串的附加操作更容易。 - Andrey
2使用这个性能比较来帮助你做出选择：http://jsperf.com/dom-vs-innerhtml-based-templating - A. M.
7个回答
58
说实话，客户端模板现在非常流行，但也是一个森林。
我认为最流行的是：
还有很多其他的模板库，但你必须测试它们以找到最适合你和你的项目风格的。
就个人而言，我很难添加新的语法和逻辑集合（混合逻辑和模板，你好吗？），所以我选择纯js。我所有的模板都存储在它自己的html文件中（./usersTable.row.html）。我仅在ajax加载内容时使用模板，并且有几个“逻辑”js文件，一个用于表格，一个用于div，一个用于列表。甚至连select选项的逻辑都没有（我使用另一种方法）。
每次我尝试做更复杂的事情时，我发现代码变得不太清晰，并且需要更多的时间来稳定比以前做事情的方式。在模板中添加逻辑是毫无意义的，而添加它自己的语法只会增加难以追踪的错误。
- roselan
14
一个JavaScript模板引擎。
插件适用于jQuery...
特点：
- 100%基于JavaScript编写
- 支持预编译
- 支持JSON数据格式
- 可与Ajax一起使用
- 允许在模板中使用JavaScript代码
- 允许构建级联模板
- 允许在模板中定义参数
- 实时刷新！- 自动更新服务器内容...
- redsquare
5
Microsoft创建的jQuery Templates插件，并被接受为官方jQuery插件。
但需要注意的是，它现在已经被弃用。
- Andrey
4
13自从它被“弃用(deprecated)”以来，开发已停止，并且它不会退出beta版。一个微软的工程师和jQuery-UI团队正在基于JSRender开发一个新的模板。 - roselan
哎呀，真糟糕 - 我在整个 Web 应用程序中都在使用它 :( 不过还是谢谢你的提示！你有提到的即将推出的模板引擎的链接吗？ - Andrey
1我在一个项目中实现了jsRender，它非常棒。值得一试。 - ASeale
4
我建议您尝试使用json2html，它避免了编写HTML代码片段的麻烦，而是依靠JSON转换将JSON对象数组转换为非结构化列表。速度非常快且使用DOM创建。
- Chad Brown
1
4免责声明：这是我写的。但值得一看;) - Chad Brown
3
几年前我建立了IBDOM：http://ibdom.sf.net/ | 截至2009年12月，如果您直接从主干获取它，则支持jQuery绑定。
此外，您现在可以将所有"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。从服务器获取数据，轻松地将其注入到您的文档中。
$("#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。从服务器获取数据，轻松地将其注入到您的文档中。
- Chris Holland
3
还有一件事：IBDOM 使用 100% 纯 DOM 方法，零 innerHTML。 - Chris Holland
另一个注意点：IBDOM 实现了我所谓的“forkedLoopExecution”，这是一个内部使用的组件，也可以作为独立的组件使用。问题在于：假设您正在通过 createElement 和 appendChild 修改 DOM，在某种循环结构中遍历相当大的数据对象数组：大多数浏览器在 DOM 受影响的代码“返回”之前不会“重绘”用户界面。在一个大型的“for 循环”中，如果有大量数据，我们的搜索结果可能需要花费半秒到几秒钟的时间才能一次性显示整个内容。 - Chris Holland
解决方案：分叉循环执行利用setTimeout引发的递归执行，在重复传递数据集合的整个生命周期中，实现了每次循环迭代的“返回和重新绘制”，从而给您带来即时渲染的感觉：“立即给用户看到一些东西”。 - Chris Holland
2
你应该注意一下 JavaScript 模板引擎，这是一个小型的模板引擎，被著名的 jQuery 文件上传插件所使用，并由同一作者 Sebastian Tschan (@blueimp) 开发。
请按照 Sebastian 的使用指南进行操作，只需删除此行。 https://github.com/blueimp/JavaScript-Templates
不要忘记在您的HTML文件中加入div结果标签。
请按照 Sebastian 的使用指南进行操作，只需删除此行。 https://github.com/blueimp/JavaScript-Templates
document.getElementById("result").innerHTML = tmpl("tmpl-demo", data);
请使用这个替代它
$('#result').html(tmpl('tmpl-demo', data));
不要忘记在您的HTML文件中加入div结果标签。
<div id="result"></div>
欢迎使用
- vinzcelavi
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接