Javascript MVC 学习笔记(三) 视图和模板
模板
Javascript中模板的核心概念是,将包括模板变量的HTML片段和Javascript对象做合并。把模板变量替换为对象中的属性值。
书中讲到了几种库作为模板引擎,可是链接失效了。能够在这里下载,链接:jQuery.tmpl
使用方式非常easy,看一下它的说明即可了。给定一个模板。通过给它加入数据就能生成渲染好的元素节点。然后就能够将它加入到页面中,主要用法如:
//数据
var object = {
url: "http://example.com",
getName: function(){
return "Trevor";
}
};
//模板
var template = '<li><a href="${url}">${getName()}</a></li>';
//生成渲染的元素
var element = $.tmpl(template, object);
//加入到body中
$("body").append(element);
能够看到使用${}
来书写插入的变量,再依据传入到$.tmpl()
的object
的相应属性名获取到详细的值。上面的实例将会生成一个<li><a href="http://example.com">Trevor</a></li>
,并插入到body的最后。
模板功能还有非常多。比方条件和迭代,使用过EL表达式的同学都应该好理解。详细用法能够去百度谷歌一下。
对于模板的存储。能够保存在<script>
标签里,通过标签的id获取模板的引用。
比方:
<!-- 存放模板 -->
<script type="text/x-jquery-tmpl" id="someTemplate">
<span>${getName()}</span>
</script>
<script>
var data = {
getName: function(){
return "Bob";
}
}
var element = $("#someTemplate").tmpl(data);
element.appendTo("body");
</script>
绑定
本质上讲。绑定将视图元素和Javascript对象(一般是模型)挂街在一起。当模型改变时,视图将依据改变后的对象做适时更新。
绑定意味着当记录发生改变的时候控制器不必处理视图的更新,由于更新已经自己主动完毕了。使用绑定也为构建实时应用程序打下了基础。
比方有一个ul
列表,显示应用中的用户。我们须要创建用户的时候让ul
也动态改变。
<ul id="users">
</ul>
一个用户相应一个li
元素,所以创建一个模板保存username:
<script type="text/x-jquery-tmpl" id="userTmpl">
<li>${name}</li>
</script>
然后将模型和视图进行绑定:
//模型
var User = function(name){
this.name = name;
};
//存放用户的数组
User.records = [];
//为用户绑定自己定义事件
User.bind = function(ev, callback){
//初始化_callbacks(该对象属性为事件名,值为相应的事件处理函数)
this._callbacks || (this._callbacks = {});
//初始化_callbacks[ev](一个数组,里面存放该事件的事件处理函数)
(this._callbacks[ev] || (this._callbacks[ev] = [])).push(callback);
}
//触发自己定义事件
User.trigger = function(ev){
var list;
if(!this._callbacks){
return;
}
//获取全部事件处理函数
if(!(list = this._callbacks[ev])){
return;
}
//全部运行
$.each(list, function(){
this();
})
}
//创建用户
User.create = function(name){
//存放用户
this.records.push(new this(name));
//触发自己定义事件
this.trigger("change");
};
$(function(){
//绑定事件
User.bind("change", function(){
//创建模板,传入一个数组代表将该数组内全部对象分别渲染模板。有多少个对象创建多少个模板
var template = $("#userTmpl").tmpl(User.records);
//又一次渲染ul
$("#users").empty().append(template);
});
});
能够看到在User.create
方法里面触发了change
事件,而通过bind
绑定的函数里面通过获取User.records
又一次渲染了ul
,所以每次加入用户都会让ul
刷新一次。
调用一下create方法:
User.create("zhangsan");
User.create("lisi");
效果立刻就出来了:
Javascript MVC 学习笔记(三) 视图和模板的更多相关文章
- Javascript MVC 学习笔记(一) 模型和数据
写在前面 近期在看<MVC的Javascript富应用开发>一书.本来是抱着一口气读完的想法去看的.结果才看了一点就傻眼了:太多不懂的地方了. 仅仅好看一点查一点,一点一点往下看吧,进度虽 ...
- Javascript MVC 学习笔记(二) 控制器和状态
今天进入第二个部分:控制器. 控制器和状态 从以往的开发经验来看.我们都是将状态保存在server的session或者本地cookie中,但Javascript应用往往被限制在单页面,所以我们也能够将 ...
- angular学习笔记(三)-视图绑定数据的两种方式
绑定数据有两种方式: <!DOCTYPE html> <html ng-app> <head> <title>2.2显示文本</title> ...
- MVC学习笔记索引帖
[MVC学习笔记]1.项目结构搭建及单个类在各个层次中的实现 [MVC学习笔记]2.使用T4模板生成其他类的具体实现 [MVC学习笔记]3.使用Spring.Net应用IOC(依赖倒置) [MVC学习 ...
- .NET MVC 学习笔记(三)— MVC 数据显示
. NET MVC 学习笔记(三)—— MVC 数据显示 在目前做的项目中,用的最多的数据展示控件就是table展示(说不是的请走开,不是一路人),以下详细阐述下table的使用方法. 先看效果: 上 ...
- MVC学习笔记(三)—用EF向数据库中添加数据
1.在EFDemo文件夹中添加Controllers文件夹(用的是上一篇MVC学习笔记(二)—用EF创建数据库中的项目) 2.在Controllers文件夹下添加一个空的控制器(StudentsCon ...
- ASP.NET MVC 学习笔记-2.Razor语法 ASP.NET MVC 学习笔记-1.ASP.NET MVC 基础 反射的具体应用 策略模式的具体应用 责任链模式的具体应用 ServiceStack.Redis订阅发布服务的调用 C#读取XML文件的基类实现
ASP.NET MVC 学习笔记-2.Razor语法 1. 表达式 表达式必须跟在“@”符号之后, 2. 代码块 代码块必须位于“@{}”中,并且每行代码必须以“: ...
- Spring MVC 学习笔记一 HelloWorld
Spring MVC 学习笔记一 HelloWorld Spring MVC 的使用可以按照以下步骤进行(使用Eclipse): 加入JAR包 在web.xml中配置DispatcherServlet ...
- Spring MVC 学习笔记11 —— 后端返回json格式数据
Spring MVC 学习笔记11 -- 后端返回json格式数据 我们常常听说json数据,首先,什么是json数据,总结起来,有以下几点: 1. JSON的全称是"JavaScript ...
随机推荐
- PHP安装yaf在ubuntu下面的问题解决
1.在执行make的时候出现如下错误: In file included from /root/yaf-2.1.2/yaf_router.c:28: /usr/include/php/ext/pcre ...
- bower——基本使用
基本概念 bower可以解决项目的静态文件依赖的问题 bower是用nodejs开发的,所以要现状nodejs 安装nodejs应用程序,网上自行下载 检验是否成功安装,打开电脑cmd,执行node ...
- Windows开源Web服务器性能和压力测试工具
linux有很多开源工具用来测试服务器负载,而windows上非常少,几乎没有除了几个复杂的JMeter WET等 将两个好用的工具是Linux版本通过Cygwin移植过来,方便广大windows人员 ...
- 网络编程基础_3.APC队列
APC队列 #include <stdio.h> #include <windows.h> // 保存 IO 操作的结果 CHAR Buffer1[] = { }; CHAR ...
- CAD得到当前选择的实体(网页版)
主要用到函数说明: IMxDrawSelectionSet::CurrentSelect 得到当前已经选择的实体.详细说明如下: 参数 说明 filterData 过滤条件 js中使用如下: 1 2 ...
- 梦想CAD控件com接口扩展数据
随着CAD应用软件的飞速发展,经常需要保存一些与图形可视性无关的数据,即非图形参数.例如在绘制化验样图中包含品位数据.MxCAD定义了一类参数——实体扩展数据.扩展数据与实体的可视性无关,而是用户根据 ...
- CAD梦想看图6.0安卓版 20181022更新
下载地址: http://www.mxdraw.com/ndetail_10109.html 1. 保存上次的文件浏览位置和绘制颜色 2. 调整工具条按钮位置和文字 3. 增加测量距离和面积时的捕捉功 ...
- CSS 类名的问题
以下以数字开头的 CSS 类名不会生效: .1st{ color: red; } 一个合法的 CSS 类名必需以下面其中之一作为开头: 下划线 _ 短横线 - 字母 a-z 然后紧跟其他 _,- 数字 ...
- ThinkPHP---ue编辑器
[一]简介 (1)介绍 一款百度开发的JS插件 ue编辑器,全称Ueditor(翻译为你的编辑器),百度开发的在线编辑器,是一款在线编辑器软件,在线编辑器又称为“富文本编辑器”. 国外也有一款类似的编 ...
- spring boot+mybatis+mysql增删改查分页
server: port: servlet: context-path: /springBootMybatis spring: datasource: name: test url: jdbc:mys ...