5

以下は、Backbone.js からの関連コードです。

バックボーン イベントは何らかの形で 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;
    }
};
4

2 に答える 2

4

docsから、バックボーン:

jQuery のデリゲート関数を使用して、ビュー内の DOM イベントの宣言型コールバックを提供します。

コードの顕著なスニペットは次のとおりです。

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

...jQuery（またはzepto、または$演算子を提供する他のもの）にイベント委任を処理するように依頼します。

したがって、問題のイベントがビューのdelegateEventsメソッドを使用してバインドされている場合、バインドは jQuery を介して行われています。

ただし、Backbone.Eventsモジュール自体はスタンドアロン オブジェクト (DOM 要素ではない) での使用を意図しており、バックボーン ソースで個別に定義されます。

于 2012-09-27T14:30:34.823 に答える
1

あなたの質問は私には少し困惑しています.バックボーンコアとjQueryコアの内外を疑問に思っているのか、それともMVVMとそれを使用する理由に困惑しているのかはわかりません. いずれにせよ、同じ目的を達成するために異なる方法で使用されるため、各ライブラリのコアを分離することは重要ではありません。

2 つのアプローチは、フレームワークが原因で異なります。Backbone.js (および Knockout) は MVVM フレームワークの一部であり、JavaScript 関数とプレゼンテーション層の間の分離層を可能にします。ただし、jQuery はそうではありません。

すなわち

MVVM:

ユーザーコントロール→ViewModel→JavaScript処理

この JavaScript 処理は jQuery 関数を介して実行でき、jQuery と Backbone.js はシームレスに連携できます。

主な利点は？MVVM (Backbone.js)、コントロール ID に依存していません。ID が変更されても、コードは引き続き機能します。ID を具体的に割り当てる jQuery の方法ですが、これは当てはまりません。

個人的には、MVVM アプローチを採用します。

于 2012-09-27T14:32:33.823 に答える