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
随机推荐
- python day-01 (python基础知识1)
1.计算机组成(参与运算的) 主板+CPU+内存 2.python 简史 解释型语言,弱类型语言(eg:a 可以表示很多意思 a=1 或 a = “小红”) 3.数据类型: int(整数类型): ...
- fastdfs配置文件解析
1 tracker.conf 1.1 disabled=false 设置为false则该配置文件生效,否则屏蔽. 1.2 bind_addr= 程序监听地址,如果不设定则监听所有地址. 1.3 por ...
- idea 破解注册方法总结
注册码(无期限) JetbrainsCrack-2.6.2.jar适用于ideaIU-2017.2.之前版本,若版本较新适用 JetbrainsCrack-2.6.3_proc.jar. 其中Jetb ...
- Hive Metastore
metastore:实际保存表信息的地方. 包括: 数据库,表的基本信息:权限信息:存储格式信息: 各种属性信息: 权限信息: ...
- spring的依赖注入（DI）、控制反转（IOC）和面向切面（AOP）
在spring的配置文件增加 <context:component-scan base-package="com.jmu.ccjoin.service"/> <c ...
- js中的逻辑与（&&）与逻辑或（||）
var foo = 1; var bar = 0; var tar = false; var baz = 2; 一.js中的逻辑与(&&) 1.当第一个数为true时,返回第二个数: ...
- chdir函数的使用【学习笔记】
#include "apue.h" #include <fcntl.h> int main(void) { ) err_sys("chdir failed&q ...
- bzoj-1012 1012: [JSOI2008]最大数maxnumber(线段树)
题目链接: 1012: [JSOI2008]最大数maxnumber Time Limit: 3 Sec Memory Limit: 162 MB Description 现在请求你维护一个数列,要 ...
- I.MX6 不一定要设置BOOT_MODE进入烧录模式
/************************************************************************* * I.MX6 不一定要设置BOOT_MODE进入 ...
- Watir: 如何处理简单的网页弹出警告框？
以下是一个很经典的把Watir与AutoIt连接在一起的实例.如果我们对AutoIT了解的更多,处理类似的问题会更加简单.以下实例会判断页面上是否有某“删除”链接,一旦有该链接,就点击,然后点击弹出的 ...