Backbone.js views - привязка события к элементу за пределами "el"

Ответ 1

Обновление: этот ответ больше не действителен/прав. См. Другие ответы ниже!

Зачем вы хотите это сделать?

Кроме того, вы всегда можете просто привязать его с помощью обычных обработчиков jQuery. Например.

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

IIRC, Backbone.js просто использует обычные обработчики jQuery, поэтому вы по существу делаете то же самое, но нарушаете область действия:)

Ответ 2

на самом деле нет причины, по которой вы хотите привязать элемент за пределами представления, для этого существуют другие методы.

этот элемент, скорее всего, будет в его собственном представлении (если нет, подумайте о том, чтобы дать ему представление!) так как в нем есть собственный взгляд, почему бы вам просто не сделать привязку там, а в функции обратного вызова, используйте .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 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({});
});