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 相关文章推荐
Jquery Select操作方法集合脚本之家特别版
May 17 Javascript
Dom在ajax技术中的作用说明
Oct 25 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
Apr 02 Javascript
js清理Word格式示例代码
Feb 13 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
JS倒计时实例_天时分秒
Aug 22 Javascript
vue webuploader 文件上传组件开发
Sep 23 Javascript
ajax请求data遇到的问题分析
Jan 18 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
vue-cli3脚手架的配置及使用教程
Aug 28 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 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_Flame(Version:Progress)的原代码
2006/10/09 PHP
php中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
php判断手机访问还是电脑访问示例分享
2014/01/20 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
PHP实现找出链表中环的入口节点
2018/01/16 PHP
js面向对象设计用{}好还是function(){}好(构造函数)
2011/10/23 Javascript
jquery插件validate验证的小例子
2013/05/08 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
2015/06/24 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
vue+element实现打印页面功能
2019/05/20 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
Python编程之序列操作实例详解
2017/07/22 Python
Python基于回溯法子集树模板解决数字组合问题实例
2017/09/02 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
python+pygame实现坦克大战
2019/09/10 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
有原因的手表:Flex Watches
2019/03/23 全球购物
Zavvi西班牙:电子游戏、极客服装、Blu-ray、Funko Pop等
2019/05/03 全球购物
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
船舶专业个人求职信范文
2014/01/02 职场文书
捐款活动总结
2014/08/27 职场文书
中小学校园安全广播稿
2014/09/29 职场文书
水电工程师岗位职责
2015/02/13 职场文书
个人廉洁自律总结
2015/03/06 职场文书
2015年物资管理工作总结
2015/05/20 职场文书
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers