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
随机推荐
- Thread Runnable 区别
[线程的并发与并行] 在单CPU系统中,系统调度在某一时刻只能让一个线程运行,虽然这种调试机制有多种形式(大多数是时间片轮巡为主),但无论如何,要通过不断切换需要运行的线程让其运行的方式就叫并发(co ...
- RabbitMQ 使用
安装步骤略过. 启动 启动很简单,找到安装后的 RabbitMQ 所在目录下的 sbin 目录,可以看到该目录下有6个以 rabbitmq 开头的可执行文件,直接执行 rabbitmq-server ...
- Android 走向MD的配色风格
这是一些google官方推出的推荐色值 下面补充上对应的xml文件,省得大家再去自己写 <?xml version="1.0" encoding="utf-8&qu ...
- WAS：修改jsp编译器用JDK5.0
问题现象: 今天有现场反映,访问应用的个别页面报错,报错内容如下: 于是先查看其他现场,都是好的:根据报错信息,提示的意思是jsp解析不了. 结合上面2个情况,排除代码问题,应该是现场WAS环境问 ...
- UVA-11462 (计数排序)
题意: 2e6个数,按从小到大的顺序输出; 思路: 计数排序; AC代码: #include <bits/stdc++.h> /* #include <vector> #inc ...
- Java 网络处理（net io URL 等）
1. URL 类 URL 类的两个重要方法: openStream():打开到此 URL 的连接并返回一个用于从该连接读入的 InputStream. URL url = new URL(" ...
- Android gif 录屏
/********************************************************************************** * Android gif 录屏 ...
- [AHOI 2005] 航线规划
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1969 [算法] 首先离线 , 将删边操作转化为加边操作 不妨首先将这张图按边-双连通 ...
- bzoj 4289 TAX —— 点边转化
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4289 把边转化成点,同一个原有点相连的边中,边权小的向大的连差值的边,大的向小的连0的边: ...
- Android 开发:由模块化到组件化
在Android SDK一文中,我们谈到模块化和组件化,现在我们来聊聊组件化开发背后的哪些事.最早是在广告SDK中应用组件化,但是同样适用于普通应用开发 以下高能,请做好心理准备,看不懂请发私信来交流 ...