Javascript MVC —

原文：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'}填充模板，结果如下：

<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'></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){<br /> this.fadeIn()<br /> });

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

模板填充

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

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

模板预加载

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

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

已支持的模板引擎

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

EmbeddedJS

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",<br /> {message: "Hello World"}, function(result){<br /> // do something with result<br /> })<br /> 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的填充结果。

Javascript MVC —— View相关推荐

【译】使用自定义ViewHelper来简化Asp.net MVC view的开发------part1
从开发者的角度来看,创建Asp.net MVC的View是一件很爽的事,因为你可以精确控制最终生成的HTML.具有讽刺意味的是不得不写出每一行HTML代码同时也是Asp.net MVC的View中让人 ...
Javascript MVC架构之旅
为什么80%的码农都做不了架构师?>>> 日期:2012-9-10 来源:GBin1.com 本文摘自smashingmagazine的Journey Through The ...
JavaScript MVC框架PK：Angular、Backbone、CanJS与Ember
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html 内部邀请码:C8E245J (不写邀请码,没有现金送) 国 ...
JavaScript MVC之Jamal
.为什么要搞JavaScript MVC了 ? 有些人可能不理解, 我刚开始也不理解,但是有一些现实里的需求,让我主动去寻找一个这样的MVC框架, 我的需求很简单,因为我想有一个好的js代码组织结构, ...
10种顶级javascript框架比较-The Top 10 Javascript MVC Frameworks
转载于:http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/ Gordon L. Hempton是西雅 ...
JavaScript MVC 框架开源软件
HTML的Web框架AngularJS Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进 ...
javascript：12种JavaScript MVC框架之比较
Gordon L. Hempton是西雅图的一位黑客和设计师,他花费了几个月的时间研究和比较了12种流行的JavaScript MVC框架,并在博客中总结了每种框架的优缺点,最终的结果是,Ember. ...
JavaScript MVC框架和语言总结[infoq]
infoq关于javascript的语言和框架的总结,非常全面,值得一读. http://www.infoq.com/minibooks/emag-javascript Contents of the ...
[转]12种JavaScript MVC框架之比较
From : http://www.infoq.com/cn/news/2012/05/js-mvc-framework/ Gordon L. Hempton是西雅图的一位黑客和设计师,他花费了几个月 ...

Javascript MVC —— View

使用