- 浏览: 304227 次
- 性别:
- 来自: 长沙
文章分类
最新评论
-
完善自我:
支持一下!
揭秘IT人才特点:中美印日四国程序员比较 -
悲剧了:
好文,看玩thinking in java的提到的异常处理,看 ...
高效的Java异常处理框架(转) -
yin_bp:
开源框架bbossgroups页支持组件异步方法调用哦,详情请 ...
Spring 3中异步方法调用 -
flyjava:
sun的悲哀
Apache怒了,威胁说要离开JCP
Everyone loves client side templates. They are a great way to create html which is something JavaScript apps do all the time.
In February, a jQuery templating system was proposed and resulted in a tremendous amount of discussion , followed by an official templating engine for jQuery - jquery-tmpl .
Although jquery-tmpl is a solid templating engine, the discussion highlighted three extremely important facts about developers and client side templates:
Fact 1: Everyone has their own favorite templating engine.
There's a whole slew of templating languages people like:
Most of these template engines have distinct advantages and dissadvantages. It's impossible to expect a single template engine to meet everyone's needs.
Fact 2: Most templating engines provide the exact same features.
I've yet to encounter a template that does't provide:
- A way of loading templates (typically from HTMLElement or files)
- A way of caching processed templates.
- An interface to render the template with arbitrary data.
Fact 3: Very few people are familiar with the complexities of using templates.
There's more than just syntax and magic tag preference that goes into a templating system. Consider:
- How can I build and share plugins that uses templates?
- How can I share templates across pages / apps?
- How can I organize template files?
jQuery.View
jQuery.View is a templating interface that takes care of the complexities of using templates, while being completely template agnostic.
This means that you can use any templating language in the exact same way and get all the additional features that jQuery.View provides.
Features
- Convenient syntax.
- Template loading from html elements and external files .
- Synchronous and asynchronous template loading.
- Template preloading.
- Caching of processed templates.
- Bundling of processed templates in production builds.
Downloads
- jquery.view.js [minified ]
- jquery.view.ejs.js [minified ]
- jquery.view.jaml.js [minified ]
- jquery.view.micro.js [minified ]
- jquery.view.tmpl.js [minified ]
Documentation
Use
When using views, you're almost always wanting to insert the results of a rendered template into the page. jQuery.View overwrites the jQuery modifiers so using a view is as easy as:
$("#foo
").html
('mytemplate.ejs
',{message: 'hello world'
}
)
This code:
-
Loads the template a 'mytemplate.ejs'. It might look like:
<h2 > <%= message %> </h2 >
-
Renders it with {message: 'hello world'}, resulting in:
"<h2 > hello world</h2 > "
-
Inserts the result into the foo element. Foo might look like:
<div id='foo' > <h2 > hello world</h2 > </div >
jQuery Modifiers
You can use a template with the following jQuery modifier methods:
after | $('#bar').after('temp.jaml',{});
|
append | $('#bar').append('temp.jaml',{});
|
before | $('#bar').before('temp.jaml',{});
|
html | $('#bar').html('temp.jaml',{});
|
prepend | $('#bar').prepend('temp.jaml',{});
|
replace | $('#bar').replace('temp.jaml',{});
|
replaceWidth | $('#bar').replaceWidth('temp.jaml',{});
|
text | $('#bar').text('temp.jaml',{});
|
Template Locations
View can load from script tags or from files. To load from a script tag, create a script tag with your template and an id like:
<script
type='text/ejs'
id='recipes'
>
<% for
(var
i=0
; i < recipes.length; i++){ %>
<li><%=recipes[i].name %></li>
<%} %>
</script
>
Render with this template like:
$("#foo
").html
('recipes',recipeData)
Notice we passed the id of the element we want to render.
Packaging Templates
If you're making heavy use of templates, you want to organize them in files so they can be reused between pages and applications.
But, this organization would come at a high price if the browser has to retrieve each template individually. The additional HTTP requests would slow down your app.
Fortunately, StealJS can build templates into your production files. You just have to point to the view file like:
steal.views('path/to/the/view.ejs');
This will pre-process the view and insert it into a compressed single file with your other JS code.
Note: Steal 1.1 will even let you not load the view engine in production if all your templates are packaged.
Asynchronous
By default, retrieving requests is done synchronously. This is fine because StealJS packages view templates with your JS download.
However, some people might not be using StealJS or want to delay loading templates until necessary. If you have the need, you can provide a callback paramter like:
$("#foo"
).html('recipes'
,recipeData, function
(result)
{
this
.fadeIn()
});
The callback function will be called with the result of the rendered template and 'this' will be set to the original jQuery object.
Just Render Templates
Sometimes, you just want to get the result of a rendered template without inserting it, you can do this with $.View:
var
out = $.View('path/to/template.jaml'
,{});
Preloading Templates
You can preload templates asynchronously like:
$.View('path/to/template.jaml'
,{}, function
()
{
});
When it comes time to use them in your app, they will be ready for the user.
Supported Templates
JavaScriptMVC comes with the following templates:
-
EmbeddedJS
<h2 > <%= message %> </h2 >
-
JAML
h2(data.message);
-
Micro
<h2 > {%= message %}</h2 >
-
jQuery.Tmpl
<h2 > ${message}</h2 >
Mustache is supported in a 2nd party plugin.
Using Other Templates:
Integrating into $.View (and StealJS's build process) is easy, you just have to register your script like:
$.View.register({
suffix : "tmpl"
,
renderer: function
( id, text )
{
return
function
(data)
{
return
jQuery.render( text, data );
}
},
script: function
( id, text )
{
var
tmpl = $.tmpl(text).toString();
return
"function(data){return ("
+
tmpl+
").call(jQuery, jQuery, data); }"
;
}
})
Here's what each property does:
-
suffix
- files that use this suffix will be processed by this template engine -
renderer
- returns a function that will render the template provided by text -
script
- returns a string form of the processed template function.
Conclusion
Templates are great, but there's a lot of extra work that goes into making a template engine useful. But, almost all of that extra work can be abstracted and reused.
This is exactly what jQuery.View is! It's a tool so future template engines don't have to worry about loading, caching, and bundling templates.
Even better, as it is a uniform template API, it enables plugin authors to write widgets that accept arbitrary template types.
I personally feel like this would be a good canidate for jQuery an official jQuery plugin of its own. Imagine customizing the layout of a widget by passing it a template:
$("#upcoming
").srchr_search_result
({
modelType : Srchr.Models.Upcoming,
resultView : "//srchr/views/upcoming.ejs"
}
);
P.S. This is actual code from our JavaScriptMVC version of Srchr . Read about it here . We customize search results panels with a Model used to retrieve searches and a view to output the results.
原文:http://jupiterjs.com/news/organizing-a-jquery-application#news/jquery-view-client-side-templates-for-jquery
发表评论
-
Web编程是函数式编程
2010-11-30 13:44 1025任何一位在两个领域里 ... -
如何开发Web应用程序
2010-11-30 13:41 1062这是一个经常被问到的 ... -
设计Web应用程序时要注意可伸缩性
2010-11-26 09:19 876Max Indelicato是一位软件 ... -
Web 2.0应用客户端性能问题十大根源
2010-11-25 20:19 987Web 2.0应用的推广为用户带来了全新的体验,同时也让开 ... -
HTML压缩(JSP的GZIP实现)
2010-11-24 22:31 4890HTTP 压缩可以大大提高浏览网站的速度,它的 ... -
浏览器加载和渲染html的顺序
2010-11-22 09:45 25031.浏览器加载和渲染html的顺序 1、IE下载的顺序是从上到 ... -
在服务端合并和压缩JavaScript和CSS文件
2010-11-22 09:16 1083Web性能优化最佳实践中最重要的一条是减少HTTP请求 ... -
用 YUI Compressor 压缩和混淆 JS 和 CSS
2010-11-22 09:05 2293一、简介: 目前开发Web应用Javas ... -
如何缓存DWR生成的JS文件
2010-11-18 17:37 1930DWR provides a convenient mec ... -
HTTP状态一览
2010-11-17 22:43 734在网站建设的实际应用中,容易出现很多小小的失误,就像m ... -
两款HTTP流量分析工具的比较:HTTP Watch,Fiddler
2010-11-17 17:26 0做Web开发或者Web分析经常需要查看Http通讯的过程, ... -
了解CSS的查找匹配原理,让CSS更简洁、高效
2010-11-17 16:49 0用了这么多年的CSS,现在才明白CSS的真正匹配原理,不知 ... -
高性能WEB开发 - flush让页面分块,逐步呈现
2010-11-17 16:47 0在处理比较耗时的请求的时候,我们总希望先让用户先 ... -
WEB高性能开发 - 疯狂的HTML压缩
2010-11-17 16:46 0前言: ... -
该如何加载google-analytics(或其他第三方)的JS
2010-11-17 16:44 0很多网站为了获取用户访问网站的统计信息,使用了go ... -
高性能WEB开发 - 页面呈现、重绘、回流。
2010-11-17 15:57 0页面呈现流程 在讨论页面重绘、回流之前。需要 ... -
高性能WEB开发 - JS、CSS的合并、压缩、缓存管理
2010-11-17 15:54 0本篇文章主要讨论下目前JS,CSS 合并、压缩、缓存 ... -
高性能WEB开发- 减少请求,响应的数据量
2010-11-17 15:49 0上一篇中我们说 ... -
高性能WEB开发 - 为什么要减少请求数,如何减少请求数!
2010-11-17 15:42 0http请求头的数据量 我们先分析下 ... -
高性能web开发 - 如何加载JS,JS应该放在什么位置?
2010-11-17 15:39 0外部JS的阻塞下载 所有浏览器在下载JS的时候, ...
相关推荐
Addison.Wesley.C++.Templates-The.Complete.Guide.chm 值得看看。
Addison.Wesley.C++.Templates-The.Complete.Guide.rar
资源分类:Python库 所属语言:Python 资源全名:janis-pipelines.templates-0.9.4.tar.gz 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059
email-templates 用于在Node.js中创建,预览和发送自定义电子邮件模板。高度可配置和支持自动内嵌CSS,样式表,嵌入图像和字体等等!
资源来自pypi官网。 资源全名:acid.senza.templates-1.92-py3-none-any.whl
资源来自pypi官网。 资源全名:acid.senza.templates-1.6-py3-none-any.whl
Laravel开发-client-templates 将不同文件中的客户端模板呈现到应用程序的主视图中
前端项目-clientside-haml-js,Haml compiler for client side javascript and coffeescript view templates
资源来自pypi官网。 资源全名:acid.senza.templates-1.1.tar.gz
IEEE-Transactions-Word-templates-and-instructions.zip
Taihom.ASP.Templates.4.0.2011.09.25-带分页示例,好多人找,我发到这里让大家下载吧。这已经是最新的了。
python库。 资源全名:pyats.templates-19.0-py3-none-any.whl
Test-Case-Templates.xls Test-Case-Templates.xls Test-Case-Templates.xls
percona-zabbix-templates是zabbix监控mysql的一套工具
cacti - mysql模板 mysql-cacti-templates-1.1.3.tar.gz
,MDB-Admin-Dashboard-Templates-Pack_4.8.11,MDB-Blog-Templates-Pack_4.8.11,MDB-ecommerce-Templates-Pack_4.8.11,MDB-Landing-Page-Templates-Pack_4.8.11,MDB-Magazine-Templates-Pack_4.8.11,MDB-Portfolio-...
Kendo UI for jQuery Integration You can use the Kendo UI widgets for jQuery along with Kendo UI ... For example, Angular templates cannot be used in the configuration of the Kendo UI widgets for jQuery.