JavaScriptMVC之View

视图提供在JQuery中使用模板的一致接口。

当模板引擎注册它们，你就可以做以下的操作：

1、在Jquery中视图扩展了after,append,before,html,prepend,replaceWith,text。

2、模板可以从HTML元素和额外文件中加载
3、同步和异常的模板加载机制
4、延迟渲染
5、模板缓存
6、在产品构建中绑定处理后的模板
7、直接在模板中连接Jquery插件

使用

使用视图时，你总是想把渲染后的视图插入到页面中。jQuery.View重写了jQuery的修饰符，所以使用一个视图是非常容易的：

$("#foo").html('mytemplate.ejs',{message: 'hello world'})

 

上述代码代表意思：

1、加载一个名为mytemplate.ejs的模板。它包含的内容如下：

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

 

使用{message: 'hello world'}渲染它，结果如下：

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

 

 
最后把结果插入到指定的foot元素中。如下：

<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:设置每一个匹配元素的html内容。

$('#bar').html('temp.jaml',{});

 

prepend:向每个匹配的元素内部前置内容。

$('#bar').prepend('temp.jaml',{});

 

replaceWith:将所有匹配的元素替换成指定的HTML或DOM元素。

$('#bar').replaceWith('temp.jaml',{});

 

text:设置所有匹配元素的文本内容

$('#bar').text('temp.jaml',{});

 

通过修饰符使用模板，你只需要一个字符串和一个对象（或者函数）


模板定位

视图可以通过脚本标签或者文件定位。

从脚本标签

从脚本标签加载视图，创建一个带ID的脚本标签来包含模板内容：

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

 

渲染这个模板方法如下：

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

 

注意：我们是通过元素ID来渲染视图的。

从文件

你可以通过一个模板路径来定位：

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

 

然而，典型的作法就是想让模板在任何页面都可以加载。
就这个问题，使用//就是从JMVC根目录查找到模板。

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

 

 
最后，控制器下的视图插件让查找一个视图模板更加简单：

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

 

打包模板

如果你使用大量的模板，你想组织管理这些模板文件，让它们可以在页面和程序中重用。
但是，如果浏览每次都分别获取每个模板，这样的结构得到的是一个高价格。
这些额外的HTTP请求让你的程序性能缓慢下降。
幸运的是，[steal.static.views steal.views] 能把模板压缩到你的产品文件中。你只需像下述一样指定视图文件即可：

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

 

异步

一般，获取请求的动作是同步的。这是很好的，因为StealJs是使用JS下载来打包视图模板。
然而，一些人可能不使用StealJs或者想延迟至到必要时才加载模板。如果你有这样的需要，你可以提供一个回调函数作为参数：

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

 

这个回调函数将等待this设置对象和模板渲染后才被调用。

延迟

如果你使用jQuery修饰符来延迟执行$.View，这个View将等待所有延迟处理完后才渲染视图。这让请求和使用响应结果渲染模板执行。

下述讲的是并行发送todos请求和todos.ejs模板，todos和模板一加载完后，它会使用todos对象渲染这个视图。

$('#todos').html("todos.ejs",Todo.findAll());

 

只渲染模板，不插入页面

有时，你只想去获取一个结果来渲染模板，但是，不想将模板插入到页面中。你可以使用$.View：

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

 

 
预加载模板

你可以异步预加载模板：

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

 

提供的模板引擎

JavaScriptMVC提供了下面的模板语言：

1、EmbeddedJS

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

 

2、JAML

h2(data.message); 

 

3、Micro

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

 

4、jQuery.Tmpl

<h2>${message}</h2>

 

在第二方插件中还提供了一个流行的Mustache模板引擎。

使用其它模板引擎

组合你喜欢的模板引擎到$.View和Steal中，是很容易的。

使用$.View.register：

$.View.register({
    suffix : "tmpl",
 plugin : "jquery/view/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); }";
    }
}) 

 

构造器

查找一个模板，处理它，缓存它，接着使用数据和可选助手渲染模板。
使用Steal，在产品压缩中视图是一个典型的包。它可以同步使用视图：

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

 

如果你没有使用StealJS，最好异步使用视图：

$.View("//myplugin/views/init.ejs",
       {message: "Hello World"}, function(result){
  // do something with result
})

new $.View(view, data, helpers, callback) -> String 

 

下面我们的是讲解几个View配置项：

1、$.View.ext 视图引擎后缀，如果加载视图URL时，没有带后缀名，则使用这个默认的后缀名。 它的默认值为.ejs。

2、$.View.cache 视图缓存，默认值为true，保证同一个视图只会被加载一次。

3、$.View.hookup:注册一个hookup函数在thml被插入到页面后被调用。这个功能需要视图引擎支持， 目前只有EJS支持。

var id = $.View.hookup(function(el){
       //do something with el
    }),
    html = "<div data-view-id='"+id+"'>"
$('.foo').html(html); 

 

最后，我讲解一下在项目中我使用的模板引擎语法。

我们使用的是EJS模板引擎。

EJS模板语法

EJS使用了５种标签：

1、执行JS代码：

<% alert('hello world') %>

 

2、执行JS和把转码后的结果写到模板：

<h1><%= 'hello world' %></h1>

 

3、执行JS代码和把未转码的结果写到模板：

<h1><%== '<span>hello world</span>' %></h1>

 

4、写<%= CODE %>结果到模板中：

<%%= 'hello world' %>

 

5、只是写注释，不做任何事情：

<%# 'hello world' %>

 

查找控制器

HTML画完后，我们经常想把一些控件和插件插入到HTML中。视图可以很容易达到这个效果。

你只是给元素上添加上控制器名就能查找到：

<ul <%= Mxui.Tabs%>>...<ul> 

 

当然，你也可以给同个元素添加多个控制器：

<ul <%= [Mxui.Tabs, Mxui.Filler]%>>...<ul> 

 

你也可能通过视图助手使用其它jQuery插件来查找控制器：

<ul <%= plugin('mxui_tabs', { option: 'value' }) %>>...<ul> 

 

注意：使用视图助手不要加分号。

视图助手

视图助手返回HTML代码。
视图最常用的是使用视图和视图助手[jQuery.EJS.Helpers.prototype.text text]。
你可以给视图或者视图助手添加自定义的插件。
而且很容易可以实现。

例如：我们给视图助手添加一个大小写转换功能。

 

$.EJS.Helpers.prototype.toUpper = function(params)
{
    return params.toUpperCase();
}

 

然后，在视图中使用：

<%= toUpper('javascriptmvc') %>

 

 

评论

2 楼 lyndon.lin 2013-04-23  

我不明白你为什么要这样做？你可以在DOM的父节点上加事件就行了，把子节点的事件委托给父节点处理就行了。

1 楼 sky254541843 2013-04-22  

若果我想给View注册事件，怎么弄呢？
比如：
    $("#foo").html('mytemplate.ejs',{message: 'hello world'});
    ...假设这一行还有其他代码
mytemplate.ejs的渲染是异步的，我想在mytemplate.ejs渲染完之后给里面的DOM注册事件，我不想在Control里面像写实例方法那么注册，也不通过Class注册，因为DOM的ID要等到mytemplate.ejs渲染完才能确定