Backbone.js Inherit Views

I have a FormView which handles such events as save and cancel. I also have an AjaxFormView that handles save, cancel and get form by ajax. I have an AssetFormView that handles save, cancel, get by ajax, delete, and print. So on and so forth. there is considerable repitition.

I found a post this post http://kalimotxocoding.blogspot.com/2011/03/playing-with-backbonejs-views.html

where he shows you can extend views. However, I'm finding that when i have multiple versions of views on the page there are properties cross pollinating. Is there no built in way to inherit views in backbone, that is safe?

Thanks,

Raif

* hmmm well, this stuff is pretty thick and my current cross polli开发者_开发知识库nation issue may be ( probably is ) the result of some error on my part, but the question still stands, is there not and would it not be an important feature to have, some way to inherit views?

---

I'd like to see what you mean when you say that your properties are cross-pollenating.

The View.extend mechanism works quite well. Do be aware, though, that you are extending one prototype with new functions. With prototypical inheritance, the prototype shares it's objects with the new instances.

I am guessing that when you say that your properties are "cross-pollenating", you are actually doing something like this:

var baseModel = Backbone.Model.extend({
    defaults: {
        foo: { bar: "baz" }
    }
});

Since the objects are shared, every instance of baseModel ends up having the same object for foo, giving the feeling of cross-pollination.

If instead, you define your defaults as a function, then each instance will get it's own copy of the foo object and your cross-pollination goes away.

var baseModel = Backbone.Model.extend({
    defaults: function() { return {
        foo: { bar: "baz" }
    } }
});

Of course, without code, we can't be certain to what your problem is. Just know that this mechanism has been well-used among the community without trouble. It is safe. You just need to understand what is going on.

---

I'm not sure if this is the same problem you're having but I wanted to have some events defined in the parent class and then have the child class extend the property without overriding it.

If I did it like this, I was overriding what the parent defined:

App.parent = Backbone.View.extend({
    events: {
        'click #button-add': 'onAddButtonClicked'
        'click #button-delete': 'onDeleteButtonClicked'
    }

    onAddButtonClicked: function() {
        console.log('onAddButtonClicked');
    },

    onDeleteButtonClicked: function() {
        console.log('onDeleteButtonClicked');
    }
});

App.child = App.parent.extend({
    initialize: function() {
        // This looks redundant but it seems to protect App.parent::events
        this.events = _.extend({}, this.additionalEvents, this.events);

        // THIS IS WRONG and results in errors when I have multiple childdren:
        _.extend(this.events, this.additionalEvents); // <-- this seems to change the parent
    }

    additionalEvents: {
        'click #button-additional': 'onOtherButtonClicked'
    },

    onOtherButtonClicked: function() {
        console.log('child:onOtherButtonClicked');
    }
});

When extending the parent's events like this:

_.extend(this.events, this.additionalEvents);

I'd get "Uncaught Error: Method 'onOtherButtonClicked' does not exist" because I was modifying App.parent's events field. App.child2 was blowing up because it couldn't see the events that were put there by App.child.

By changing it to:

this.events = _.extend({}, this.additionalEvents, this.events);

I was able to protect the parent.