English 中文(简体)
推荐用于JQuery的JavaScript HTML模板库?[关闭]
原标题:
  • 时间:2009-01-16 07:48:09
  •  标签:
问题回答

说实话,客户端模板化现在非常流行,但是相当复杂。

我相信最受欢迎的是:

  • pure: It use only js, not his own "syntax"
  • mustache: quite stable and nice I heard.
  • jqote2: extremely fast according to jsperfs
  • jquery templates (deprecated):

还有很多其他的选择,但你必须测试它们以找到最适合你和你的项目风格的。

就我个人而言,我很难添加新的语法和逻辑设置(混合逻辑和模板,你好吗??),所以我选择了纯 js。我所有的模板都存储在自己的 HTML 文件中(./usersTable.row.html)。我只在通过 AJAX 获取内容时使用模板,并且只有几个“逻辑” js 文件,一个用于表格,一个用于 div,一个用于列表。甚至连 select 的选项都没有一个逻辑 js 文件(我使用另一种方法)。

每次我尝试做更复杂的事情,我发现代码变得更不清晰,花费的时间也比用“旧”方法更长。在我看来,模板中的逻辑毫无意义,添加它自己的语法只会增加非常难以追踪的错误。

jTemplates(j模板)

a template engine for JavaScript.

Plugin to jQuery...

特征:

  • 100% in JavaScript
  • precompilator
  • Support JSON
  • Work with Ajax
  • Allow to use JavaScript code inside template
  • Allow to build cascading templates
  • Allow to define parameters in templates
  • Live Refresh! - automatic update content from server...

这个主题有一个合理的讨论文档 在这里,涉及到一系列模板工具。尽管与jQuery无关。

由微软创建并被接受为官方jQuery插件的jQuery模板插件。

但请注意,它现在已过时。

我会检查json2html,它不必编写HTML片段,而是依靠JSON转换将JSON对象数组转换为非结构化列表。非常快速并使用DOM创建。

几年前,我建立了IBDOM:http://ibdom.sf.net/ | 从2009年12月起,如果你直接从代码库获取,它支持jQuery绑定。

$("#foo").injectWith(collectionOfJavaScriptObjects);

或者 (Huòzhě)

$("#foo").injectWith(simpleJavaScriptObject);

另外,您现在可以将所有"data:propName"标记放置在class="data:propName other classnames"属性中,这样您就不必在应用程序的内容中乱放这些标记。

I ve yet to update a bunch of the documentation on there to reflect my recent enhancements, but the i ve had various versions of this framew或者 (Huòzhě)k in production since 2007.

对于这个问题的怀疑者:

Back when Microsoft invented with IE5 what we now know as XmlHttpRequest and the "ajax" pattern, part of the promise behind this was to purely exchange data between a web browser and the server. That data was to be encapsulated in XML, because in 1999/2000, XML was simply just so very hot. Beyond retrieving an xml document over the netw或者 (Huòzhě)k with a call-back mechanism, MS s MSXML ActiveX component also supp或者 (Huòzhě)ted a pre-draft implementation of what we now know as XSL-T and XPath.

Combining retrieving HTTP/XML, XPath, and XSL-T, aff或者 (Huòzhě)ded developers tremendous creativity to build rich "documents" which behaved as "applications", purely sending, and m或者 (Huòzhě)e imp或者 (Huòzhě)tantly, retrieving data from the server.

为什么这是一个有用的模式?这取决于您的用户界面有多复杂,以及您有多在意其可维护性。

在构建一个拥有高级CSS的视觉非常丰富、语义标记的界面时,你最不想做的就是将标记的各个部分划分为“小控制器/视图”,以便你可以使用.innerHTML将文档片段插入到主文档中,这是为什么呢。

保持高级HTML/CSS用户界面易于管理的一个关键原则是在其开发的活动阶段至少保持其验证。如果您的标记验证,您可以专注于您的CSS错误。现在,如果标记片段在用户交互的各个阶段被注入,那么整个过程变得非常难以管理,并且整个过程会变得脆弱。

The idea was to have all of your markup UI constructs in a single document, retrieve ONLY DATA over the netw或者 (Huòzhě)k, and use a solid framew或者 (Huòzhě)k which will at the very least simply inject your data into your markup constructs, and at the most replicate markup constructs which you flagged as repeatable.

This was possible with XSL-T and XPath in IE5+, but virtually no other browsers. Some F/OSS browser framew或者 (Huòzhě)ks have been dabbling with XPath but it s not quite something we can rely on just yet.

So what s the next best thing to achieve such pattern? IBDOM. Get data from your server, inject it in your document. eff或者 (Huòzhě)tlessly.

你应该看一看Javascript-Templates,这是在著名的jQuery文件上传插件中使用的一种小型模板引擎,由同一位作者Sebastian Tschan (@blueimp)开发。

将此翻译为中文:https://github.com/blueimp/JavaScript-Templates 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>

享受 (xiǎng shòu)





相关问题
热门标签