Backbone.js框架中简单的View视图编写学习笔记


Posted in Javascript onFebruary 14, 2016

传统上用jQuery操作DOM,就类似C语言中的goto语句,随着项目复杂度增大,会越来越难以维护。
关于MVC(以及后续的MVP,MVVM),网上资源很多,就不展开。我们直接用代码来操练。

index.html
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Backbone</title>
</head>

<body>
  <div class="wrapper"></div>
  <script src="js/lib/jquery.min.js"></script>
  <script src="js/lib/underscore-min.js"></script>
  <script src="js/lib/backbone-min.js"></script>
  <script src="build/x.js"></script>
</body>
</html>

其中,x.js是用duo生成后的js。文件中引用的几个js,都可以从百度静态资源库中下载到

1.js

var ListView = Backbone.View.extend({
 //el: $('.wrapper'),

 // 初始化函数,new时,backbone会自动调用
 initialize: function() {
  this.render();
 },

 // 真正把修改操作同步到浏览器中
 render: function() {
  this.$el.append("<ul><li>Hello techfellow!</li></ul>");
 }
});

var listView = new ListView({el: $('.wrapper')});

执行:

$duo 1.js

知识点说明

  • el:表示该View所代表的DOM元素,在render函数中,会同步到DOM操作中去。
  • initialze:调用new时,会触发的函数调用,类似构造函数。
  • render:触发DOM操作,浏览器会渲染
  • 最后一句,说明在new时,可以传递参数

疑惑
如果写成 new ListView({el: '.wrapper'})也是可以的。
但考虑到el本身的含义,还是加上$更清晰些。

  • $el和$()
  • $(this.el) 等价于 this.$el
  • $(this.el).find('.wrapper') 等价于 this.$('.wrapper')

setElement
如果想修改el内容,包括值和绑定事件,可以使用setElement。下面这个例子中,setElement不仅仅把el的引用从button1改为button2,连click事件也同步修改过去了。

// We create two DOM elements representing buttons
// which could easily be containers or something else
var button1 = $('<button></button>');
var button2 = $('<button></button>');

// Define a new view
var View = Backbone.View.extend({
   events: {
    click: function(e) {
     console.log(view.el === e.target);
    }
   }
  });

// Create a new instance of the view, applying it
// to button1
var view = new View({el: button1});

// Apply the view to button2 using setElement
view.setElement(button2);

button1.trigger('click');
button2.trigger('click'); // returns true

事件处理和模板解析都是前端渲染必需的工作,backbone一般把这些内容放到View里面统一处理。
2.js

var ListView = Backbone.View.extend({
 el: $('.wrapper'),

 events: {
  'click button#add': 'addItem'
 },

 // 初始化函数,new时,backbone会自动调用
 initialize: function() {
  // 用于计数
  this.counter = 0;
  this.render();
 },

 // 真正把修改操作同步到浏览器中
 render: function() {
  this.$el.append("<button id='add'>点击添加</button><ul></ul>");
 },

 // event handler
 addItem: function() {
  this.counter++;
  this.$('ul').append("<li>Hello techfellow, " + this.counter + " time(s)");
 }
});

var listView = new ListView();

执行:

$duo 2.js

知识点

  • this.counter:内部使用的数据,可以initialize中初始化
  • events:声明格式,'event selector': 'func',这比之前$('.wrapper button#add').on('click', function(){...}); 的方式要清晰许多了。

模板

在index.html中加入:

<script type="text/template" id="tplItem">
  <li>Hello techfellow, <%= counter %> time(s)</li>
</script>
<!--要放在2.js前面,否则在执行时,可能遇到找不到tplItem的情况-->
<script src="build/2.js"></script>

在View的声明中修改:

events: {
 'click button#add': 'addItem'
},

template: _.template($('#tplItem').html()),

修改addItem:

addItem: function() {
 this.counter++;
 this.$('ul').append(this.template({counter: this.counter}));
}

同理,这里的模板可以替换为任何第三方模板引擎。
比如:artTemplate

var template = require('./lib/template.js');
...
this.$('ul').append(template('tplItem', {counter: this.counter}));
...
Javascript 相关文章推荐
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 Javascript
JavaScript字符串删除重复字符的方法
Dec 25 Javascript
JavaScript代码性能优化总结(推荐)
May 16 Javascript
JavaScript中变量、指针和引用功能与操作示例
Aug 04 Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
Jun 13 Javascript
微信小程序商品详情页底部弹出框
Nov 22 Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 Javascript
10个JavaScript中易犯小错误
Feb 14 #Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 #Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 #Javascript
Node.js 条形码识别程序构建思路详解
Feb 14 #Javascript
jQuery插件支持同一页面被多次调用
Feb 14 #Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 #Javascript
JavaScript中关联原型链属性特性
Feb 13 #Javascript
You might like
PHP遍历并打印指定目录下所有文件实例
2014/02/10 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
2018/10/15 PHP
Ucren Virtual Desktop V2.0
2006/11/07 Javascript
获取body标签的两种方法
2011/10/13 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
jquery easyui使用心得
2014/07/07 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
JS常用算法实现代码
2016/11/14 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
快速使用node.js进行web开发详解
2017/04/26 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
详解python脚本自动生成需要文件实例代码
2017/02/04 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
transform python环境快速配置方法
2018/09/27 Python
python url 参数修改方法
2018/12/26 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
应用心理学个人求职信范文
2013/12/11 职场文书
法人委托书范本
2014/04/04 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python