Can I add attributes to a Backbone View?

Question

I have been working with backbone for a while and I am now using a number of views. In some of my views I sometimes add custom attributes like:

    var DataGrid = Backbone.View.extend({
        className:"datagrid",
        lookup: {
            header: "", //Header wrapper row element
            headers: [], //Views in header
            body: "", //Body wrapper row element
            rows: [] //Views in body
        },

        events: {
            ...
        },

        initialize: function() {
            ...
        },

        render: function() {
            ...
        }
    });

As you can see I have "lookup" as an extra attribute to the Object. I use DataGrid in a number of my views and I am experiencing a very strange behaviour. When I switch between views that use DataGrid, "lookup" would still be populated with the old data. I use "new" when creating a new DataGrid but I still find old data. Am I missing something?

EDIT: Following @rabs reply. I did a search on static variables in Backbone and found this: Simplify using static class properties in Backbone.js with Coffeescript

Per

Add your custom properties to this in the initialize function. – Brahmin

Answer 1

Declaring variables in this way the scope of the variable is to the class not the instance, similar to s static or class variable.

So yeah the lookup object will shared between your different instances.

You could pass the lookup object in to your instance when you create it that way it will behave as an instance variable.

Marianmariana

Great, thanks for the tip. I will probably use the initialize method since every instance needs "loopkup". Thanks – Per

Answer 2

I know an answer has been accepted on this (a while ago), but as I came across this question while working on a backbone project recently, I thought it would be worth mentioning that you can define attributes as a function also. This is especially useful for views that need to have attributes set to values in their current models.

By defining attributes as a function you can do something like

var myObject = Backbone.View.extends({
    attributes: function() {
        if(this.model) {
            return {
                value: this.model.get('age')
            }
        }
        return {}
    }
}); 

Hope that helps someone

Angloindian

I'm not really sure if the model should contain view specific data. At least those are separated to be reusable (a model can be attached to different views and vice versa). – Announcement

It doesn't contain 'view specific' data, the view is using the data the model contains. Subtle difference I know. Remember, a view's attributes will be added to the DOM element as an attribute. So if the view has an attribute of id and the tagName is div, the resulting DOM element will be <div id="{view.attributes.id}" /> (pseudo-code...). In this case, it's perfectly reasonable to use some model data... and the view can use it how it likes... so, using a function that id value could be something 'user-' + model.get('id'). Hope that helps your understanding :) – Angloindian

Well, I'm new to Backbone/Underscore (and don't like it), but at first I thought the View should be reusable and therefore omit hard coding stuff like age in it (using arguments or whatever instead). I got around it a bit more and it seems that a View is a very specific, DOM element related thing. Now see: We found a good reason why I +1ed it the first time I read it :) – Announcement