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 form 验证函数 当前比较流行的错误提示
Jun 23 Javascript
使用jQuery轻松实现Ajax的实例代码
Aug 16 Javascript
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 Javascript
script标签属性用type还是language
Jan 21 Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 Javascript
Bootstrap模态对话框的简单使用
Apr 29 Javascript
详解JavaScript的内置对象
Dec 07 Javascript
如何解决hover在ie6中的兼容性问题
Dec 15 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
js中的闭包学习心得
Feb 06 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
May 10 Javascript
Vue实现手机计算器
Aug 17 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/07/19 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
Yii框架获取当前controlle和action对应id的方法
2014/12/03 PHP
PHP获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
基于javascript实现的搜索时自动提示功能
2014/12/26 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
2017/05/17 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
layer实现弹出层自动调节位置
2019/09/05 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
推荐下python/ironpython:从入门到精通
2007/10/02 Python
Python实现句子翻译功能
2017/11/14 Python
答题辅助python代码实现
2018/01/16 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
pytorch使用horovod多gpu训练的实现
2020/09/09 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
博士研究生自我鉴定范文
2013/12/04 职场文书
食品厂厂长岗位职责
2014/01/30 职场文书
班委竞选演讲稿
2014/04/28 职场文书
开工仪式策划方案
2014/05/23 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
2014年就业工作总结
2014/11/26 职场文书
2016年共产党员公开承诺书
2016/03/24 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
Python scrapy爬取起点中文网小说榜单
2021/06/13 Python
Python实现学生管理系统(面向对象版)
2021/06/24 Python
MySQL分区以及建索引的方法总结
2022/04/13 MySQL