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
随机推荐
- ABAP debug遇到问题
新项目的系统,调试是老出现这个框不断弹出,一堆出来 都来不及关. 不确定是不是因为可用对话框不够的原因.
- javascript 无刷新上传图片之原理
刚开始我认为可以像ajax 那样获取到数据然后通过ajax 发送请求,后来发现浏览器为了客户端的安全默认并没有给javascript 这个权限.这个方法当然是行不同了.我看了好像开源的上传图片原理,当 ...
- iOS 编程之使用Precompile Prefix Header
一:为什么Xcode6没有自动创建Precompile Prefix Header 我们在写项目的时候,大部分宏定义,头文件导入都在Precompile Prefix Header文件里面.在Xcod ...
- Github--开源代码仓库式系统（转）
要了解Github,我们首先要知道Git,Git是管理代码的工具,写代码不是件轻松的事儿,一个人写的时候已经不轻松了,一群人写就更不轻松了,但这世界上很多事都是怎么不轻松怎么来的,大部分人都会和别人一 ...
- explain之二：Explain 结果解读与实践，分析诊断工具之二
MySQL的EXPLAIN命令用于SQL语句的查询执行计划(QEP).这条命令的输出结果能够让我们了解MySQL 优化器是如何执行SQL 语句的.这条命令并没有提供任何调整建议,但它能够提供重要的信息 ...
- 【旧文章搬运】Windbg+Vmware驱动调试入门(二)---Vmware及GuestOS的设置
原文发表于百度空间,2009-01-08========================================================================== 这一篇是主 ...
- 用deamon打开ISO文件，提示命令行错误！！
用deamon打开ISO文件,提示命令行错误!! 解决方法:(没有关联iso文件)重新卸载deamon,再重新安装,在关联iso文件处打对勾,安装完成后即可用
- fileupload简单使用
form.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" page ...
- ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 02. Web Host 的默认配置
视频地址: https://www.bilibili.com/video/av38392956/?p=2 语雀 https://www.yuque.com/yuejiangliu/dotnet/ixt ...
- PTA QQ Account Manageme【map的巧妙应有】
5-27 QQ Account Management (25分) You are supposed to implement the functions of account "Log in ...