Question

以下是Backbone.js的相关代码

Backbone事件是否与jQuery事件有关？或者你想选择。

例如，jQuery click使用：

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

对于骨干他们have this

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();

Backbone相关事件代码

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

来自docs，Backbone：

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

代码的显着片段是this：

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

...要求jQuery（或zepto，或其他任何提供$运算符的人）处理事件委托。

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

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

Answer 2

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

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

即

MVVM：

用户控制 - ＆gt; ViewModel - ＆gt; JavaScript处理

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

主要优势？ MVVM（Backbone.js），你不依赖于控件ID，如果他们改变那么你的代码仍然有效。 jQuery专门分配ID的方式，情况并非如此。

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

活动| jQuery还是Backbone？

2 个答案: