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') %>

JavaScriptMVC之View相关推荐

JavaScriptMVC之快速开发
有些同学反映说,需要看太多的篇章才能明白如何使用JavaScriptMVC来开发,可不可以用一篇把主要用到技术介绍一下,这样就可以快速入门,并且可以快速用到开发项目的. 这篇文章就是这个目的,下面我 ...
Javascript MVC —— View
原文:http://javascriptmvc.com/docs.html#&who=jQuery.View 翻译:刘贵学(liuguixue@gmail.com) 借助jQuery,View ...
JavaScriptMVC学习(一)--Steal
最近在学习JavaScriptMVC,网上的资料很少, 看得也是一头雾水. 感谢lyndon.lin, 问了你很多弱智问题,你都能很认真地回答. 现在还没能从整体上把握JavaScriptMVC, 只 ...
view(*args)改变张量的大小和形状_pytorch reshape numpy
20201227 这个方法是在不改变数据内容的情况下,改变一个数组的格式,参数及返回值,官网介绍: a:数组–需要处理的数据 newshape:新的格式–整数或整数数组,如(2,3)表示2行3列,新的 ...
View的Touch事件分发(二.源码分析)
Android中Touch事件的分发又分为View和ViewGroup的事件分发,先来看简单的View的touch事件分发. 主要分析View的dispatchTouchEvent()方法和onTou ...
View的Touch事件分发(一.初步了解)
Android中Touch事件的分发又分为View和ViewGroup的事件分发,先来看简单的View的touch事件分发. 一次完整的Touch事件序列为: ACTION_DOWN -> AC ...
View绘制流程的入口
View绘制流程的入口是WindowManager.add(decor, l),从Activity的创建开始分析,具体流程如下: Activity.onCreate() setContentView( ...
Android中View如何刷新
View的更新方式主要有以下3种: 1.不使用多线程和双缓冲这种情况最简单,在View发生改变时对UI进行重绘.你只需要Activity中显式调用View对象中的invalidate()方法即可,系 ...
Android自定义View基本步骤
一.自定义属性 1.在res下的values下面新建attrs.xml 2.在布局中使用,声明命名空间 3.在自定义View构造方法中通过TypedArray获取属性 4.必须回收 array.rec ...

JavaScriptMVC之View

JavaScriptMVC之View相关推荐

最新文章

热门文章