原文:http://javascriptmvc.com/docs.html#&who=jQuery.View
翻译:刘贵学(liuguixue@gmail.com)
借助jQuery,View使用模板提供了统一的接口,使用注册的模板引擎,您可以:
- View中使用jQuery扩展,after,append, before, html, prepend, replace,replaceWith, text.;
- 模板,加载html元素以及外部文件;
- 同步与异步的模板加载;
- 模板缓存;
- 在产品编译时,编译并处理模板;
- 在模板中直接调用jQuery插件
使用
当使用view时,您会常需要将模板填充的结果加到网页中,jQuery.View重写了jQuery的修饰符,因此使用view可以非常简单,如下:
$("#foo").html('mytemplate.ejs',{message: 'hello world'})
以上代码:
- 加载模板 'mytemplate.ejs',模板内容如下:
- 使用{message: 'hello world'}填充模板,结果如下:
- 将结果赋给foo元素,foo元素如下:
jQuery 修饰符
您可以在模板中使用以下jQuery修饰符:
$('#bar').after('temp.jaml',{}); | |
$('#bar').append('temp.jaml',{}); | |
$('#bar').before('temp.jaml',{}); | |
$('#bar').html('temp.jaml',{}); | |
$('#bar').prepend('temp.jaml',{}); | |
$('#bar').replace('temp.jaml',{}); | |
$('#bar').replaceWidth('temp.jaml',{}); | |
$('#bar').text('temp.jaml',{}); |
这些jQuery的修饰符一般需要您传递一个字符串和一个对象给模板。
模板的位置
View可以从脚本标记或文件中加载模板.
从脚本中加载
可使用如下方式创建模板的脚本标记:
填充此模板如下:
注意:我们将需要填充的元素id传入。
从文件加载
您可以传递模板的路径,如下:
但是,我们经常需要模板的相对路径(统一相对于根路径而言),可使用// 来得到JMVC的根路径:
最后,[jQuery.Controller.prototype.view controller/view]插件可使路径的查找更简单:
模板打包
如有您使用比较多的模板,您想以文件的形式将它们组织好,以便在页面或应用间复用。
但是,这种方式的代价也是比较大的,如果浏览器检单独索每个模板,这些额外的http请求会使您的应用变慢。
幸运的是,steal.views 可将模板编译到您的产品文件,您只需按如下方式指出view文件即可:
steal.views('path/to/the/view.ejs');
异步
默认情况下,请求是以同步(需要等待)的方式完成的。也没关系,因为StealJS会将view模板打包到您的JS一起下载。
然而,有人并没使用StealJS,或只是想等需要的时候再加载模板,如果您有这些需求,您可以提供一个回调函数作为参数,如下:
回调函数会与填充的模板结果一起调用,并通过'this'传给原有的jQuery对象。
模板填充
有时,您只需要获取填充过的模板,并不赋给其他元素,您可以使用$.View:
模板预加载
您可以异步预加载模板,如下:
已支持的模板引擎
JavaScriptMVC 可以支持以下模板语言:
- EmbeddedJS
- JAML
- Micro
- jQuery.Tmpl
比较流行的Mustache 引擎会在第二阶段加入。
使用其他的模板引擎
基础您喜欢的模板到$.View与steal是非常简单的,详情请阅读jQuery.View.register.
构造函数
模板的查找,处理,缓存,使用数据填充以及其他辅助函数,使用StealJS,可以在编译产品时将模板与view合起来,同步的方式,使用view是没有问题的,如下:
如果您没有StealJS的话,最好用异步的方式使用view,如下:
- view {String}
模板源文件的url或id
- data {Object}
传给view的数据.
- helpers {optional:Object}
辅助函数(可选),view中可能会用到,并非所有的模板都支持。
- callback {optional:Object}
回调函数(可选),如果有,此模板以异步方式加载,如果你没有将模板压缩到你的view中,推荐使用。
- returns {String}
View的填充结果。