Javascript MVC —— View

 

原文：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'，模板内容如下:

 

<h2><%= message %></h2> 

 

• 使用{message: 'hello world'}填充模板，结果如下：

 

<div id='foo'>"<h2>hello world</h2></div> 

 

•  将结果赋给foo元素，foo元素如下：

 

<div id='foo'><h2>hello world</h2></div> 

 

jQuery 修饰符

您可以在模板中使用以下jQuery修饰符：

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',{});
replaceWith	$('#bar').replaceWidth('temp.jaml',{});
text	$('#bar').text('temp.jaml',{});

这些jQuery的修饰符一般需要您传递一个字符串和一个对象给模板。

模板的位置

View可以从脚本标记或文件中加载模板.

 

从脚本中加载

可使用如下方式创建模板的脚本标记：

<mce:script type='text/ejs' id='recipes'><!-- <% for(var i=0; i < recipes.length; i++){ %> <li><%=recipes[i].name %></li> <%} %> // --></mce:script> 

填充此模板如下:

$("#foo").html('recipes',recipeData) 

注意：我们将需要填充的元素id传入。

 

从文件加载

 

您可以传递模板的路径，如下：

$("#foo").html('templates/recipes.ejs',recipeData) 

但是，我们经常需要模板的相对路径（统一相对于根路径而言），可使用// 来得到JMVC的根路径：

$("#foo").html('//app/views/recipes.ejs',recipeData) 

最后，[jQuery.Controller.prototype.view controller/view]插件可使路径的查找更简单：

$("#foo").html( this.view('recipes', recipeData) ) 

模板打包

如有您使用比较多的模板，您想以文件的形式将它们组织好，以便在页面或应用间复用。

但是，这种方式的代价也是比较大的，如果浏览器检单独索每个模板，这些额外的http请求会使您的应用变慢。

幸运的是，steal.views 可将模板编译到您的产品文件，您只需按如下方式指出view文件即可：

steal.views('path/to/the/view.ejs');

异步

默认情况下，请求是以同步（需要等待）的方式完成的。也没关系，因为StealJS会将view模板打包到您的JS一起下载。

然而，有人并没使用StealJS，或只是想等需要的时候再加载模板，如果您有这些需求，您可以提供一个回调函数作为参数，如下：

$("#foo").html('recipes',recipeData, function(result){ this.fadeIn() }); 

回调函数会与填充的模板结果一起调用，并通过'this'传给原有的jQuery对象。

模板填充

有时，您只需要获取填充过的模板，并不赋给其他元素，您可以使用$.View:

var out = $.View('path/to/template.jaml',{}); 

模板预加载

您可以异步预加载模板，如下：

$.View('path/to/template.jaml',{}, function(){}); 

已支持的模板引擎

JavaScriptMVC 可以支持以下模板语言:

•  EmbeddedJS

 

<h2><%= message %></h2> 

•  JAML

h2(data.message); 

• Micro

<h2>{%= message %}</h2> 

• jQuery.Tmpl

<h2>${message}</h2> 

比较流行的Mustache 引擎会在第二阶段加入。

使用其他的模板引擎

基础您喜欢的模板到$.View与steal是非常简单的，详情请阅读jQuery.View.register.

 

构造函数

模板的查找，处理，缓存，使用数据填充以及其他辅助函数，使用StealJS，可以在编译产品时将模板与view合起来，同步的方式，使用view是没有问题的，如下：

 

$.View("//myplugin/views/init.ejs",{message: "Hello World"}) 

 

如果您没有StealJS的话，最好用异步的方式使用view，如下：

 

$.View("//myplugin/views/init.ejs", {message: "Hello World"}, function(result){ // do something with result }) new $.View(view, data, helpers, callback) -> String 

 

•  view {String}

模板源文件的url或id

•  data {Object}

传给view的数据.

•  helpers {optional:Object}

辅助函数（可选），view中可能会用到，并非所有的模板都支持。

• callback {optional:Object}

回调函数（可选），如果有，此模板以异步方式加载，如果你没有将模板压缩到你的view中，推荐使用。

•  returns {String}

View的填充结果。