Backbone.js視圖 - 將事件綁定到“el”之外的元素

Question

這個問題的第二個答案很好地解釋了Backbone.js視圖中的事件聲明如何作用於視圖的el元素。

想要將事件綁定到el范圍之外的元素（例如頁面的不同部分上的按鈕）似乎是合理的用例。

實現這一目標的最佳方法是什么？

Answer 1

你想要綁定到視圖外的元素並不是真正的理由，還有其他方法可以解決這個問題。

該元素最有可能出現在它自己的視圖中（如果沒有，請考慮給它一個視圖！）因為它在它自己的視圖中，為什么不在那里進行綁定，在回調函數中，使用.trigger(); 觸發事件。

在當前視圖中訂閱該事件 ，並在觸發事件時觸發正確的代碼。

看一下JSFiddle中的這個例子， http：//jsfiddle.net/xsvUJ/2/

這是使用的代碼：

var app  = {views: {}};

app.user = Backbone.Model.extend({
    defaults: { name: 'Sander' },
    promptName: function(){
        var newname = prompt("Please may i have your name?:");
        this.set({name: newname});
    }
});

app.views.user = Backbone.View.extend({
    el: '#user',
    initialize: function(){
        _.bindAll(this, "render", "myEventCatcher", "updateName");
        this.model.bind("myEvent", this.myEventCatcher);
        this.model.bind("change:name", this.updateName);
        this.el = $(this.el);
    },
    render: function () {
        $('h1',this.el).html('Welcome,<span class="name">&nbsp;</span>');
        return this;
    },
    updateName: function() {
        var newname = this.model.get('name');
        console.log(this.el, newname);
        $('span.name', this.el).text(newname);
    },
    myEventCatcher: function(e) {
        // event is caught, now do something... lets ask the user for it's name and add it in the view...
        var color = this.el.hasClass('eventHappened') ? 'black' : 'red';
        alert('directly subscribed to a custom event ... changing background color to ' + color);
        this.el.toggleClass('eventHappened');

    }
});

app.views.sidebar = Backbone.View.extend({
    el: '#sidebar',
    events: {
        "click #fireEvent" : "myClickHandler"
    },
    initialize: function(){
        _.bindAll(this, "myClickHandler");
    },
    myClickHandler: function(e) {
        window.user.trigger("myEvent");
        window.user.promptName();
    }
});


$(function(){
    window.user = new app.user({name: "sander houttekier"});
    var userView = new app.views.user({model: window.user}).render();
    var sidebarView = new app.views.sidebar({});
});

Answer 2

更新：此答案不再有效/正確。 請看下面的其他答案！

你為什么要這樣做？

除此之外，你總是可以使用常規的jQuery處理程序綁定它。 例如

$("#outside-element").click(this.myViewFunction);

IIRC，Backbone.js只使用常規的jQuery處理程序，所以你基本上做同樣的事情，但打破范圍:)