专栏首页Python程序员杂谈backbonejsView中事件绑定源码分析

backbonejsView中事件绑定源码分析

其实上下文是接上一篇的,因为自己不理解backbone view中的事件绑定所以掉到了自己挖的一个坑里,调了两个晚上。把backbone view部分的代码看了之后才明白。

什么样的坑?

来看简单的实例代码

.. code:: html

<div class="topbar"><span class="search">搜索</span><div>

<div class="content_container">bla bla bla bla</div>

对应的js代码是

.. code:: javascript

var View = Backbone.View.extend({
    $el: $('#content_container'),

    events: {
        'click .search': function(evt){console.log('search')},
    }
});

大概就是这样的一个坑,在不理解backbone绑定事件的情况下,默认以为它是绑定的 .search 这个东西。其实不然。

来看看源码

下面是部分代码

.. code:: javascript

// 984 ~ 990 行代码  backbonejs 1.0.0
var View = Backbone.View = function(options) {
  this.cid = _.uniqueId('view');
  this._configure(options || {});
  this._ensureElement();
  this.initialize.apply(this, arguments);
  this.delegateEvents();  // 这句是重点
};

// ......   省略若干行

// 1054 ~ 1073
delegateEvents: function(events) {
  if (!(events || (events = _.result(this, 'events')))) return this;
  this.undelegateEvents();
  for (var key in events) {
    var method = events[key];
    if (!_.isFunction(method)) method = this[events[key]];
    if (!method) continue;

    var match = key.match(delegateEventSplitter);
    var eventName = match[1], selector = match[2];
    method = _.bind(method, this);
    eventName += '.delegateEvents' + this.cid;
    if (selector === '') {
      this.$el.on(eventName, method);
    } else {
      this.$el.on(eventName, selector, method);  // 这句是重点
    }
  }
  return this;
},

关键点在于后面的那个 delegateEvents 这个函数。该函数的流程是:

  • 判断events这个属性是否定义
  • 先接触这个view中的所有已委托的事件
  • 一些合法性检验,如名称是否合法,是否是函数等
  • 绑定到view实例上
  • 最后就是绑定到 $el

看到这就明白了为啥我的那个search始终无法触发了,因为它在 $el 中根本就选择不到它。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 14、backbone实战:webchat(三)web端开发

    沿着上一篇文章的思路,我们先来把javascript模板建立起来,模板用来取代上一篇中html代码里的:

    the5fire
  • 8、backbone实例todos分析(二)view的应用

    在上一篇文章中我们把todos这个实例的数据模型进行了简单的分析, 有关于数据模型的操作也都知道了。接着我们来看剩下的两个view的模型,以及它们对页面的操作。

    the5fire
  • 解决SSH登录太慢的问题

    换了腾讯云国内的主机后,最近发现每次 SSH 上去都很艰难,一开始使用 fabric 自动部署博客上去还行,到后来直接超时。于是简单搜索了下,发现问题所在。

    the5fire
  • vue.js响应式原理解析与实现—实现v-model与{{}}指令

    上一节我们已经分析了vue.js是通过Object.defineProperty以及发布订阅模式来进行数据劫持和监听,并且实现了一个简单的demo。今天,我们就...

    嘿嘿嘿
  • 地理位置计算之geohash算法

    最近在做共享单车单车的项目,用户打开APP后,如果根据当前的经纬度坐标获取附近的车辆呢?

    北溟有鱼QAQ
  • JavaScript中this指向问题,暴力理解终极方法

    前言:前端面试题总有问this是谁?对于java程序员来说,this很好理解,就是当前对象本身。对于js来说,this就是传说中的当前运行环境,其实理论知识一大...

    王念博客
  • 机器学习入门 9-1 什么是逻辑回归

    本系列是《玩转机器学习教程》一个整理的视频笔记。本小节主要介绍什么是逻辑回归算法以及将实数域范围映射到[0, 1]区间概率值的Sigmoid函数。

    Chenkc
  • tensorflow: 畅玩tensorboard图表(SCALARS)

    这篇博客建立在你已经会使用tensorboard的基础上。如果你还不会记录数据并使用tensorboard,请移步我之前的另一篇博客:tensorflow: t...

    Petrichor_
  • 做底层 AI 框架和做上层 AI 应用,哪个对自己的学术水平(或综合能力)促进更大?

    新智元获得了解浚源和微调两位用户的授权,将他们对此问题的深度解析做了整理,与读者共享。

    新智元
  • Java如何操作Word, Excel,

      接下来简要介绍一下如何更新一个已经存在的工作薄,主要是下面二步操作,第一步是构造只读的Excel工作薄,第二步是利用已经创建的Excel工作薄创建新的可写入...

    用户2398817

扫码关注云+社区

领取腾讯云代金券