活动| jQuery还是Backbone？

Question

以下是Backbone.js的相关代码

Backbone事件是否以任何方式与jQuery事件相关？或者你想选择.

例如,对于jQuery单击,您使用:

$("#target").click(function() {
  alert("Handler for .click() called.");
})

对于骨干,他们有这个

var object = {};

_.extend(object, Backbone.Events);

object.on("alert", function(msg) {
  alert("Triggered " + msg);
});

object.trigger("alert", "an event");

具有事件触发器的骨干模型

var Sidebar = Backbone.Model.extend({
  promptColor: function() {
    var cssColor = prompt("Please enter a CSS color:");
    this.set({color: cssColor});
  }
});

window.sidebar = new Sidebar;

sidebar.on('change:color', function(model, color) {
  $('#sidebar').css({background: color});
});

sidebar.set({color: 'white'});

sidebar.promptColor();

骨干相关事件代码

var Events = Backbone.Events = {
    on: function(events, callback, context) {
        var calls, event, node, tail, list;
        if (!callback) {
            return this;
            events = events.split(eventSplitter);
            calls = this._callbacks || (this._callbacks = {});
        while (event = events.shift()) {
            list = calls[event];
            node = list ? list.tail : {};
            node.next = tail = {};
            node.context = context;
            node.callback = callback;
            calls[event] = {tail: tail, next: list ? list.next : node};
        }
        return this;
    },
    off: function(events, callback, context) {
        var event, calls, node, tail, cb, ctx;
        if (!(calls = this._callbacks)) return;
        if (!(events || callback || context)) {
            delete this._callbacks;
            return this;
        }
        events = events ? events.split(eventSplitter) : _.keys(calls);
        while (event = events.shift()) {
            node = calls[event];
            delete calls[event];
            if (!node || !(callback || context)) continue;
            tail = node.tail;
            while ((node = node.next) !== tail) {
                cb = node.callback;
                ctx = node.context;
                if ((callback && cb !== callback) || (context && ctx !== context)) {
                    this.on(event, cb, ctx);
                }
            }
        }
        return this;
    },
    trigger: function(events) {
        var event, node, calls, tail, args, all, rest;
        if (!(calls = this._callbacks)) return this;
        all = calls.all;
        events = events.split(eventSplitter);
        rest = slice.call(arguments, 1);
        while (event = events.shift()) {
            if (node = calls[event]) {
                tail = node.tail;
                while ((node = node.next) !== tail) {
                    node.callback.apply(node.context || this, rest);
                }
            }
            if (node = all) {
                tail = node.tail;
                args = [event].concat(rest);
                while ((node = node.next) !== tail) {
                    node.callback.apply(node.context || this, args);
                }
            }
        }
        return this;
    }
};

Answer 1

来自文档，骨干：

使用 jQuery 的委托函数为视图中的 DOM 事件提供声明性回调。

突出的代码片段是这样的：

if (selector === '') {
  this.$el.bind(eventName, method);
} else {
  this.$el.delegate(selector, eventName, method);
}

...它要求 jQuery（或 zepto，或任何其他提供$操作符的东西）来处理事件委托。

因此，如果相关事件是使用视图绑定的delegateEvents，则该绑定是通过 jQuery 进行的。

然而，模块Backbone.Events本身旨在与独立对象（而不是 DOM 元素）一起使用，并在Backbone 源中独立定义。