5

下面是来自 Backbone.js 的相关代码

Backbone 事件是否与 jQuery 事件有任何关系？或者你应该选择。

例如对于jQuery click你使用：

$("#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;
    }
};
4

2 回答 2

4

从文档，骨干网：

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

代码的显着片段是这样的：

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

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

因此，如果有问题的事件是使用视图的delegateEvents方法绑定的，则绑定是通过 jQuery 发生的。

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

于 2012-09-27T14:30:34.823 回答
1

您的问题对我来说有点莫名其妙，我不确定您是否想知道 Backbone 核心与 jQuery 核心的来龙去脉，或者您对 MVVM 以及为什么要使用它感到困惑。无论哪种方式，将每个库的核心分开是无关紧要的，因为它们以不同的方式用于实现相同的目标。

由于框架的不同，这两种方法是不同的。Backbone.js（和 Knockout）是 MVVM 框架的一部分，允许在 JavaScript 函数和表示层之间进行一层分离。然而，jQuery 没有。

IE

MVVM：

用户控制 -> ViewModel -> JavaScript 处理

这种 JavaScript 处理可以通过 jQuery 函数来完成，jQuery 和 Backbone.js 可以无缝地协同工作。

主要优势？MVVM (Backbone.js)，你不依赖控制 ID，如果它们改变了，那么你的代码仍然有效。jQuery专门分配ID的方式，不是这样的。

就我个人而言，我会采用 MVVM 方法。

于 2012-09-27T14:32:33.823 回答