骨干视图原型事件绑定

Question

I'm creating a Backbone.js plugin that offers a basic grid layout given supplied JSON data. My problem is that I'm not sure how to deal with binding events to a View class without altering the plugin itself. And I'd rather not do this -- I'd rather have the user of the plugin be able to extend the view, or alter its prototype to bind custom events.

The View in the plugin is a basic view without any events binded. It also contains some other functions which I've omitted for simplicity.

FlipCard.CardView = Backbone.View.extend({

    tagName: 'div',

    className: 'card',

// and more

});

I've attempted to use the prototype attribute in my separate app.js file to bind events, but they don't seem to be triggered.

FlipCard.CardView.prototype.events = {
    'click .card' : 'alert'
};

FlipCard.CardView.prototype.alert = function(){
    alert("hello!");
};

And I'm familiar with the .extend({}) function, but that won't work unless I can somehow inform the plugin to use the extended version of the view... which I'd rather not do.

Any ideas on what I should be doing here?

EDIT: Turns out it was a silly error. Because the view has the class '.card' and I was trying to bind a click event to '.card', it's unnecessary to put in 'click .card'. Instead the event should be:

FlipCard.CardView.prototype.events = {
    'click' : 'alert'
};

Answer 1

If someone were to use their plugin, they would extend your FlipCard.CardView in the same way you are extending Backbone.Model

myApp.Views.myCardView = FlipCard.CardView.extend({
    events: {
        'click .card' : 'alert'
    },
    alert: function() {
        alert("hello!");
    }
}

This creates an extended version of your plugin view with events bound to it, and it does not alter the plugin in any way. The user would then instantiate it as normal:

var someView = new myApp.Views.myCardView();