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 new Date() 出现NaN 的分析
Oct 23 Javascript
jquery中的过滤操作详细解析
Dec 02 Javascript
jQuery制作简洁的图片轮播效果
Apr 03 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
Sep 20 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
Dec 14 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
详解js创建对象的几种方法及继承
Apr 12 Javascript
Vue组件通信的几种实现方法
Apr 25 Javascript
el-select 下拉框多选实现全选的实现
Aug 02 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
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数组应用之比较两个时间的相减排序
2008/08/18 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
2011/05/24 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
动态加载js、css等文件跨iframe实现
2014/02/24 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
2015/03/04 Javascript
JS实现获取当前URL和来源URL的方法
2016/08/24 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
[44:43]完美世界DOTA2联赛决赛日 FTD vs GXR 第一场 11.08
2020/11/11 DOTA
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
使用tensorflow实现线性回归
2018/09/08 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
python之yield和Generator深入解析
2019/09/18 Python
解决python多线程报错:AttributeError: Can't pickle local object问题
2020/04/08 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
python高级特性简介
2020/08/13 Python
想学画画?python满足你!
2020/12/24 Python
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
Quiksilver美国官网:始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
关于青春的演讲稿三分钟
2014/08/22 职场文书
纪委立案决定书
2015/06/24 职场文书
致短跑运动员加油稿
2015/07/21 职场文书