Backbone.js入门教程第二版笔记（3）
视图渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.9.1.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script> </head>
<body>
<div id="search_container"></div> <script type="text/template" id="search_template">
<label><%= search_label %></label>
<input type="text" id="search_input" />
<input type="button" id="search_button" value="Search" />
</script> <script>
(function ($) {
//此处添加下面的试验代码
var SearchView=Backbone.View.extend({
initialize:function(){},//初始化
render:function(content){//渲染方法
var template=_.template($('#search_template').html(),content);//模板解析
$(this.el).html(template);//将解析后的代码片段添加到el中
}
}); var searchView=new SearchView({//实例化一个视图
el:$('#search_container')//指定el元素 （每个视图都会有el属性，如果不是我们指定，则backbone会自动生成一个div元素）
});
searchView.render({search_label:"搜索渲染"});//调用视图的渲染方法 })(jQuery);
</script>
</body>
</html>
需要注意的是在调用view.render的时候，需要给模板中所有的变量传值，不然会报错。关于$el，作者说是对view中元素的缓存，不明白这是什么意思，我感觉是jquery形式的el对象。
<ul>
<% _.each(labels, function(name) { %>
<% if(name != "label2") {%>
<li><%= name %></li>
<% } %>
<% }); %>
</ul>
var SearchView = Backbone.View.extend({
el: "#search_container",
initialize: function(){
var labels = ['label1', 'label2', 'label3'];
this.render({labels: labels});
},
render: function(context) {
//使用underscore这个库，来编译模板
var template = _.template($("#search_template").html(), context);
//加载模板到对应的el属性中
$(this.el).html(template);
},
});
var searchView = new SearchView();
这个例子与第一个类似，只不过它是在初始化的时候渲染了视图，并且el是在创建SearchView的时候设置的，模板也比第一个例子复杂点。
Backbone.js入门教程第二版笔记（3）的更多相关文章
- Backbone.js入门教程第二版笔记（1）
1.模块 集合 视图 和事件的一个综合例子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
- Backbone.js入门教程第二版笔记（2）
关于手动触发router,之前看到的例子都是通过在url后面加上#xxx或者点击一个a链接方法来触发, 还有一种情况是通过触发一种规则,来触发另一种规则(表述无能),比如这个例子中,我在url后面加上 ...
- Backbone.js入门教程
原文: Getting Started with Backbone.js 不像其它的Web开发语言,过去Javascript很少可用的架构.令人感到高兴的是,最近几年这种情况得到非常大的改善. 今天我 ...
- D3.js 入门教程
最近需要用到d3, 记录下d3的教程 网上搜了几个关于d3的教程 D3.js 入门教程 http://wiki.jikexueyuan.com/project/d3wiki/author.h ...
- 【特别推荐】Node.js 入门教程和学习资源汇总
这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...
- python核心编程第二版笔记
python核心编程第二版笔记由网友提供:open168 python核心编程--笔记(很详细,建议收藏) 解释器options:1.1 –d 提供调试输出1.2 –O 生成优化的字节码(生成 ...
- Node.js 入门教程和学习资源汇总
这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...
- 【CC2530入门教程-增强版】基础技能综合实训案例（基础版）-上位机源码
[CC2530入门教程-增强版]基础技能综合实训案例(基础版)-上位机源码 广东职业技术学院 欧浩源 一.需求分析 按照指定参数打开串口,与测控终端建立数据传输通道,并根据应用要求实现程序逻辑,具体 ...
- Vue.js 入门教程
Vue.js 入门教程:https://cn.vuejs.org/v2/guide/index.html
随机推荐
- Quartz -第一篇-入门
学习地址:https://www.imooc.com/learn/846 官网:www.quartz-scheduler.org 特点:分布式+集群 设计模式: 工厂模式 builder模式 组件模式 ...
- HDU1532 Drainage Ditches —— 最大流（sap算法）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1532 Drainage Ditches Time Limit: 2000/1000 MS (Java/ ...
- Android中android:visibility的3中属性的剖析
在Android中控件或者布局的可见性android:visibility有3中情况,他们分别是: View.VISIBLE,View.UNVISIBLE,View.GONE View.VISIBLE ...
- HTTPS站点搭建教程：Win7/Windows Server 2008R2
本文将由笔者为各位读者介绍在win7/windows server 2008R2环境下使用SSL加密协议建立WWW站点的全过程:https SSL证书安装的搭建以及本地测试环境. 要想成功架设SSL安 ...
- 05:LGTB 与偶数
总时间限制: 10000ms 单个测试点时间限制: 1000ms 内存限制: 65536kB 描述 LGTB 有一个长度为 N 的序列.当序列中存在相邻的两个数的和为偶数的话,LGTB 就能把它 ...
- uoj103 apio2014 Palindromes
题目链接:http://uoj.ac/problem/103 题解: 首先,我们可以用后缀自动机算出每个字符串的出现次数.然后我们可以用manacher找出所有不同的回文串(o(n)个),统计答案即可 ...
- Video.js事件
Home 膘叔 » Archives 文章: 备份一个video的JS [打印] 分类: Javascript 作者: gouki 2012-02-16 17:58 备份一个JS,不是为了代码很优秀, ...
- STL--lower_bound()&upper_bound();
又是两个黑科技一般的存在. 首先我们来介绍一下这两个函数: ForwardIter lower_bound(ForwardIter first, ForwardIter last,const _Tp& ...
- django上课笔记5-FK关联
一.FK关联 FK关联 url.py里 from app01 import views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r' ...
- E20180331-hm
corresponding adj. 相当的,对应的; 通信的; 符合的,符合; 一致的; implicitly adv. 含蓄地; 暗示地; 无疑问地; 无保留地; causal adj. 具有因 ...