文档章节

理解 backbone.js 中的 bind 和 bindAll 方法,关于如何在方法中指定其中的

藏言
 藏言
发布于 2014/08/14 10:46
字数 790
阅读 53
收藏 0

在backbone.js的学习过程中,被bind和bindAll弄得有点晕,这里包括underscore.js的bind和bindAll,以及JQuery提供的bind方法。
在一篇En博客中学习,写下这篇笔记

1、首先说熟悉的JQuery的bind,引用api帮助文件的内容即可很清晰地理解其使用意义和方法:

dom.bind(type,[data],function(eventObject));
 
dom.bind(type,[data],false);
 
dom.bind(events);
 
 
//例子
 
//当每个段落被点击的时候,弹出其文本:
$("p").bind("click", function(){
  alert( $(this).text() );
});
 
//同时绑定多个事件类型:
$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});
 
//同时绑定多个事件类型/处理程序:
$("button").bind({
  click:function(){$("p").slideToggle();},
  mouseover:function(){$("body").css("background-color","red");},  
  mouseout:function(){$("body").css("background-color","#FFFFFF");}  
});
 
//你可以在事件处理之前传递一些附加的数据:
function handler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
 
//通过返回false来取消默认的行为并阻止事件起泡:
$("form").bind("submit", function() { return false; })
 
//通过使用 preventDefault() 方法只取消默认的行为:
$("form").bind("submit", function(event){
  event.preventDefault();
});
 
//通过使用 stopPropagation() 方法只阻止一个事件起泡:
$("form").bind("submit", function(event){
  event.stopPropagation();
});

2、underscore.js的apply方法
  apply主要作用是让我们可以控制方法中this指代的值,下面用代码表述:

var func = function beautiful(){
  alert(this + ' is beautiful');
};
func.apply('Internet');
//输出Internet is beautiful

以上例子只帮我们理解apply的作用,实际上,apply的意义何在,请看下例:

function Developer(skill) {
  this.skill = skill;
  this.says = function(){
    alert(this.skill + ' rocks!');
  }
}
var john = new Developer('Ruby');
var func = john.says;
func();
//输出undefined rocks!

上例可看出,在给调用对象john中的says方法定义一个单独的方法func后,执行func,this将被认为是func所处的对象,而不是john。这时apply可以解决问题,代码如下:

function Developer(skill) {
  this.skill = skill;
  this.says = function(){
    alert(this.skill + ' rocks!');
  }
}
var john = new Developer('Ruby');
var func = john.says;
func.apply(john);
//输出Ruby rocks!

这样做太复杂,所以需要用bind和bindAll来简化和规范化,请往下看。

3、underscore.js的bind方法

function Developer(skill) {
  this.skill = skill;
  this.says = function(){
    alert(this.skill + ' rocks!');
  }
}
var john = new Developer('Ruby');
var func = _.bind(john.says, john); //绑定的方法是john对象执行says方法,里面的this指代的是第二个参数john
func();
//输出Ruby rocks!

注意:_.bind()返回的值才是绑定的方法,而不会影响里面绑定的方法本身,看下例:

window.ProductView = Backbone.View.extrend({
  initialize: function() {
    _.bind(this.render, this);
    this.model.bind('change', this.render);
  }
});
//这样做的结果是change触发的是原this.render,方法中的this依然是不可性预计
 
 
window.ProductView = Backbone.View.extrend({
  initialize: function() {
    var f_render=_.bind(this.render, this);
    this.model.bind('change', f_render);
  }
});
//这是正确做法,或者更直接简单:
 
window.ProductView = Backbone.View.extrend({
  initialize: function() {
    this.model.bind('change', _.bind(this.render, this));
  }
});
 
//最简单当然是用_.bindAll:
window.ProductView = Backbone.View.extrend({
  initialize: function() {
    _.bindAll(this, this.render);
    this.model.bind('change', this.render);
  }
});

4、underscore.js的bindAll方法

function Developer(skill) {
  this.skill = skill;
  this.says = function(){
    alert(this.skill + ' rocks!');
  }
}
var john = new Developer('Ruby');
_.bindAll(john, 'says'); //绑定的方法是john中的says方法,里面的this指代john
                         //可以一次过指定this到多个方法:_.bindAll(john,'says','work','gohome');
var func = john.says;
func();
//输出Ruby rocks!

参考:http://blog.bigbinary.com/2011/08/18/understanding-bind-and-bindall-in-backbone.html


本文转载自:http://gxxsite.com/content/view/id/132.html

藏言
粉丝 6
博文 23
码字总数 4021
作品 1
厦门
程序员
私信 提问
慎用 Underscore 的 _.bindAll(this)

关于 bindAll Underscore 是我非常喜欢的一个 JS 库,提供了相当多方便的工具方法来简化前端开发 其中我印象最深,也是最喜欢的一个方法就是 bindAll (对于我等 Rubyist 来说,each/map/wh...

bosscheng
2014/02/16
0
0
理解 Backbone.js中的bind和bindAll

http://blog.bigbinary.com/2011/08/18/understanding-bind-and-bindall-in-backbone.html http://wenzhixin.net.cn/2013/11/01/understandingbind_bindall http://chaoskeh.com/blog/use-un......

cyper
2015/08/14
0
0
学习并运用JavaScript的原生函数

简介 尽管 JavaScript 总是让人产生误解,但是它已经成为了最流行的编程语言之一。理解 JavaScript 的内在原理很困难。同样的,迫使 JavaScript 成为常规规范,如面向对象或函数编程,同样具...

WolfX
2016/02/24
28
0
利用 BackboneJS 更好的组织 jQuery 应用的架构

在构建高交互度的Web应用程序方面,JavaScript发挥出越来越重要的作用。如Backbone.js,Marionette.js,Ember.js 和Angular.js 这些库和框架,在流行度和功能方面快速成长。对于建立复杂和强...

blackshow
2013/10/30
16.5K
15
[翻译]Android Bound Services

一个bound service是一个client-server接口中的server端。一个bound service允许应用组件(比如activities)bind到它,发送请求,接收响应,甚至是执行进程间通信(IPC)。一个bound service在典...

WolfCS
2014/03/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

数据科学热潮下的冷思考:什么才是最需要的技能?

全文共3087字,预计学习时长6分钟 图片来源:pexels.com/@freestocks 数据科学已经进入了稳定生产的成熟期,数据科学家所需的技能也在与时俱进。不仅是追求更高效的机器学习模型,在当下,推...

读芯术
32分钟前
3
0
48.Nginx访问日志 日志切割 静态文件不记录

12.10 Nginx访问日志 12.11 Nginx日志切割 12.12 静态文件不记录日志和过期时间 12.10 Nginx访问日志: ~1.日志格式 vim /usr/local/nginx/conf/nginx.conf //搜索log_format log_format com...

oschina130111
36分钟前
3
0
好程序员分享Css详解bem书写规范

  好程序员分享Css详解bem书写规范,bem是基于组件的web开发方法。其思想是将用户界面分隔为独立的块,从而使开发复杂的UI界面变得更简单和快,且不需要粘贴复制便可复用现有代码。BEM由B...

好程序员IT
41分钟前
3
0
基于cm+cdh搭建大数据集群

第一部分:搭建基本环境 1、网络配置 vim /etc/sysconfig/network-scripts/ifcfg-ens32 service network restart vim /etc/hosts 192.168.15.121 node1 192.168.15.122 node2 192.168.15.123......

一个点一个点
49分钟前
0
0
[学]ngin反向代理搭建与配置

Nginx安装地址:https://www.cnblogs.com/wyd168/p/6636529.html (linux) 必须安装的4个包: nginx-1.1.10.tar.gz openssl-1.0.1t.tar.gz pcre-8.39.tar.gz zlib-1.2.11.tar.gz ng配置主要......

覃光林
55分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部