迷你MVVM框架 avalonjs 学习教程13、模板引用
稍为复杂一点的网站都是多个前端工程师合作而成，因此分工是必需的。简单一点的分工就是一个人负责一个频道，某个页面是由一个人全部做的；但如果涉及到一个页面非常复杂，需要多个人同时动工呢？于是到模板的出场时间了。
模板有两种，一种是嵌入到页面内的模板，一种是独立成子页面的模板。这两种avalon都支持。前者通常是使用type为浏览器无法识别的MIME类型的script标签，display:none的textarea标签或noscript标签（0.94后支持，建议使用它）作为模板容器，最近HTML5出了一个新的template标签，大家也不妨用一用。一般情况下，它是用于放置弹出层的内容。另一个模板，则需要通过AJAX请求来加载它们，它们适用范围更广，并且重用性更好。
对于页面内的模板，我们可以使用ms-include=”expr”绑定，对于独立于页面的模板，我们可以使用ms-include-src=”expr”绑定。ms-include要求对应一个ID（换言之，作为模板容器的script等标签必须指定ID），ms-include-src要求对应一个路径。需要注意的是ms-include或ms-include-src的属性值默认都是对应VM的一个属性，当作是一个变量，如果想直接使用字符串，那么需要使用双重引号。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="avalon.js"></script>
<script>
var model = avalon.define({
$id: "test",
content: "引入内部模板",
name: "司徒正美",
eee: "lala",
change: function() {
model.eee = model.eee === "lala" ? "hehe" : "lala"
}
})
</script>
</head>
<body ms-controller="test">
<script type="avalon" id="tpl">
here, {{ 3 + 6 * 5 }}
</script>
<script type="avalon" id="lala">
<strong>{{name}}</strong>!!!
</script>
<script type="avalon" id="hehe">
<em>{{content}}</em>!!!
</script>
<p>{{content}}<button ms-click="change" type="button">切换子模板</button></p>
<div ms-include="'tpl'"></div><!--注意这里-->
<div ms-include="eee"></div>
</body>
</html>
ms-include与ms-include-src的属性值可以添加插值表达式，见下面例子，不过注意需要打开服务器，因为用到AJAX请求。
有四个页面，一个主页面与三个独立的子模板，它们都放在一起，内容分别如下。
include.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ms-include</title>
<script src="../avalon.js"></script>
<script>
var model = avalon.define({
$id: "test",
url: "Template1",
name: "司徒正美",
password: '12345678',
array: [1, 2, 3, 4, 5, 6, 7],
add: function(e) {
if (this.value && e.which == 13) {//this为input元素
var a = this.value
model.array.push(a)
this.value = "";
}
}
})
</script>
</head>
<body>
<h3 style='text-align: center'>ms-include</h3>
<div ms-controller="test">
<select ms-duplex="url">
<option>Template1</option>
<option>Template2</option>
<option>Template3</option>
</select>
<div ms-include-src="include{{url}}.html"></div>
</div>
</body>
</html>
includeTemplate1.html
<h1>这是模板1</h1>
<p>生成于{{ new Date | date("yyyy MM dd:HH:mm:ss")}}</p>
<p>生成于{{ "2011/07/08" | date("yyyy MM dd:HH:mm:ss")}}</p>
<p>生成于{{ "2011-07-08" | date("yyyy MM dd:HH:mm:ss")}}</p>
<p>生成于{{ "01-10-2000" | date("yyyy MM dd:HH:mm:ss")}}</p>
<p>生成于{{ "07 04,2000" | date("yyyy MM dd:HH:mm:ss")}}</p>
<p>生成于{{ "3 14,2000" | date("yyyy MM dd:HH:mm:ss")}}</p>
<p>生成于{{ 1373021259229 | date("yyyy MM dd:HH:mm:ss")}}</p>
<p>生成于{{ "1373021259229" | date("yyyy MM dd:HH:mm:ss")}}</p>
<p>值得注意的是，new Date可传的格式类型非常多，但不是所有浏览器都支持这么多，详看<a href="http://dygraphs.com/date-formats.html">这里</a>。</p>
includeTemplate2.html
<script type="avalon" id='form'>
<p>姓名：<input ms-duplex="name">{{name}}</p>
<p>密码：<input type="password" ms-duplex="password"/>{{password}}</p>
</script>
<form ms-include="'form'" style='border:1px solid #666;background:sandybrown;padding:20px'> </form>
includeTemplate3.html
<ul ms-each-el="array">
<li >第 {{$index+1}} 个元素: {{el}} <span ms-click="$remove">点我删除</span></li>
</ul>
<p>添加新元素 ，然后回车<input ms-keypress="add"></p>
如果大家想在模板加载后，加工一下模板，可以使用data-include-loaded来指定回调的名字。
如果大家想在模板扫描后，隐藏loading什么的，可以使用data-include-rendered来指定回调的名字。
<!DOCTYPE html>
<html>
<head>
<title>ms-include相关实验</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="avalon.js">
</script>
<script>
avalon.define("test", function(vm) {
vm.render = function(){
console.log("render")
}
}) </script>
</head>
<body ms-controller="test" >
<div ms-include-src="'temp.html'" data-include-rendered='render'></div>
</body>
</html>
temp.html
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script>
console.log("----------")
</script>
</head> <body>
<div>include content</div>
</body>
</html>
最后我们看avalon.templateCache，所有ms-include-src加载的模板都会缓存在这里，从而有效地减少请求数。并且这个东西还有一个额外的好处，我们的JS与CSS最终会压缩合并，对于这些模板我们也想把它们合并到JS文件里面，它就有用武之地了。这也是我们在第一节看到的那样，把requirejs加载回来的模板都放在avalon.templateCache里，与ms-include-src一起使用了。
<!DOCTYPE html>
<html>
<head>
<title>avalon.templateCache的应用</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="avalon.js"></script>
<script>
avalon.templateCache["aaa.html"] = "<strong>dddddddddddd</strong>"
avalon.templateCache["bbb.html"] = "<em>555555555555</em>" var model = avalon.define({
$id: "test",
adjust: function(tmpl) {
return tmpl +" "+ (new Date - 0)
},
aaa: "aaa.html",
change: function() {
model.aaa = model.aaa === "aaa.html" ? "bbb.html" : "aaa.html"
}
})
</script>
</head>
<body ms-controller="test">
<div ms-include-src="aaa" data-include-loaded="adjust"></div>
<button type="button" ms-click="change">点我切换模板</button>
</body>
</html>
迷你MVVM框架 avalonjs 学习教程13、模板引用的更多相关文章
- 迷你MVVM框架 avalonjs 学习教程19、avalon历史回顾
avalon最早发布于2012.09.15,当时还只是mass Framework的一个模块,当时为了解决视图与JS代码的分耦,参考knockout开发出来. 它的依赖收集机制,视图扫描,绑定的命名d ...
- 迷你MVVM框架 avalonjs 学习教程3、绑定属性与扫描机制
在MVVM框架中,你都会看到页面定了许多奇怪的属性,比如knockout的data-☆,angular的ng-☆,avalon的ms-☆,此外还有一些只写文本节点上的双花括号,它们统称为指令.ms-☆ ...
- 迷你MVVM框架 avalonjs 学习教程1、引入avalon
avalon是国内最强大的MVVM框架,没有之一,虽然淘宝KISSY团队也搞了两个MVVM框架,但都无疾而终.其他的MVVM框架都没几个.也只有外国人与像我这样闲的架构师才有时间钻研这东西.我很早之前 ...
- 迷你MVVM框架 avalonjs 学习教程18、一步步做一个todoMVC
大凡出名的MVC,MVVM框架都有todo例子,我们也搞一下看看avalon是否这么便宜. 我们先从react的todo例子中扒一下HTML与CSS用用. <!doctype html> ...
- 迷你MVVM框架 avalonjs 学习教程11、循环操作
avalon是通过ms-repeat实现对一组数据的批量输出.这一组数据可以是一个数组,也可以是一个哈希(或叫对象).我们先从数组说起吧. 第二节就说,凡是定义在VM中的数组,如果没有以$开头或者没放 ...
- 迷你MVVM框架 avalonjs 学习教程4、数据填充
MVVM是前端的究极解决方案,你们可能用过jQuery,但那个写的代码不易维护:你们可以听过说requirejs与seajs,传说中的模块开发,加载器,但它们的最终目标是打包:你们可能听过unders ...
- 迷你MVVM框架 avalonjs 学习教程2、模块化、ViewModel、作用域
一个项目是由许多人分工写的,因此必须要合理地拆散,于是有了模块化.体现在工作上,PM通常它这为某某版块,某某频道,某某页面.某一个模块,必须是包含其固有的数据,样式,HTML与处理逻辑.在jQuery ...
- 迷你MVVM框架 avalonjs 学习教程20、路由系统
SPA的成功离开不这三个东西,分层架构,路由系统,储存系统.分层架构是我们组织复杂代码的关键,这里特指MVVM的avalon:路由系统是将多个页面压缩在一个页面的关键:储存系统特指本地储存,是安全保存 ...
- 迷你MVVM框架 avalonjs 学习教程16、过滤器
avalon的过滤器是参考自angular与rivets.它也被称做管道文本过滤器,它的处理对象只能是文本(字符串),它只能用在文本绑定中,并且只能是双花括号形式.下面是各大家的过滤器比较: rive ...
随机推荐
- mysql常用语法操作
一.用户管理: 1.新建用户: >CREATE USER name IDENTIFIED BY 'ssapdrow'; 2.更改密码: >SET PASSWORD FOR name=PAS ...
- tyvj1391走廊泼水节
题目:http://www.joyoi.cn/problem/tyvj-1391 考虑对于每一条边,新加的长度是(左边点数*右边点数-1)*(当前边权+1): 然后要kruskal的思想,把边从小到大 ...
- codevs 1131 统计单词数
#include<iostream> #include<string> using namespace std; int main() { string s, s0; getl ...
- 新玩具，React v16.7.0-alpha Hooks
周五看见React v16.7.0-alpha Hooks,今早起来看见圈里已经刷屏了Hooks,正好周末,正好IG和G2的比赛还没开始,研究下... 刚刚接触react时候非常喜欢用函数式组件,因为 ...
- 一张图测试你的Hadoop能力-Hadoop能力测试图谱
1.引言 看到一张图,关于Hadoop技术框架的图,基本上涉及到Hadoop当前应用的主要领域,感觉可以作为测试Hadoop开发人员当前能力和水平的比较好的一个工具,特此分享给大家.如果你能够明白说出 ...
- 提取数据之goose使用
1.简介 Python-goose项目是用Python重写的Goose,Goose原来是用Java写的文章提取工具.Python-goose的目标是给定任意资讯文章或者任意文章类的网页,不仅提取出文章 ...
- unittest框架断言方法
assertEqual(a, b) 判断a==b assertNotEqual(a, b) 判断a!=b assertTrue(x) bool( ...
- [转]下拉按钮 C#_Winform 自定义控件
[https://workspaces.codeproject.com/elia-sarti/splitbutton-an-xp-style-dropdown-split-button] using ...
- selenium page object模式
页面对象模式将测试代码和被测试页面的元素及操作进行分离,以降低页面元素的变化对测试代码的影响.每个被测试的页面都会被定义一个类,类中会定位元素和操作. 如果不使用page object模式,则相同的操 ...
- 阳虚体质外感/胃脘痛/经期抽搐x案
* 咽干咽痛 某女 42岁 在40岁产下一子,后体质明显不如以前,几年以来,易感冒,咳嗽 每次在社区医院输液,少则一个月,多则几个月方能愈,几天前外感微咳,咽痛声嘶 观其咽并不红,舌淡苔薄白 双手 ...