Question

21

Backbone.js view instance variables?

rated 0 times [ 26] [ 5] / answers: 1 / hits: 15873 / 13 Years ago, mon, october 3, 2011, 12:00:00

I'm learning Backbone.js and am trying to figure out whether it's possible to have instance variables in Backbone views.

My goal is to load a view's templates from an external file when a view is being instantiated. Currently I'm storing them in a global variable in the Backbone app's global namespace, but it would be cleaner to store the templates in a view's instance variables. Currently I have it set up like this:

var templates = {};



MessageView = Backbone.View.extend({



    initialize: function() {

        $.get('js/Test2Templates.tpl', function(doc) {



            var tmpls = $(doc).filter('template');



            templates['MessageView'] = [];



            tmpls.each(function() {

                templates.MessageView[this.id] = $.jqotec($.unescapeHTML(this.innerHTML));

            });

        });

    },



    render: function() {

        var tpldata = {name: 'Ville', thing: 'Finland'};

        $('#display').jqoteapp(templates.MessageView.greeting_template, tpldata);

    },



    events: {

        click input[type=button]: additionalTransactions

    },



    additionalTransactions: function() {

        this.render();

    }



});

But instead of using templates being defined as a global var, I'd like to create 'templates' in a view's initialize function, along these lines (but this doesn't work):

MessageView = Backbone.View.extend({



    view_templates: {},



    initialize: function() {

        $.get('js/Test2Templates.tpl', function(doc) {



            var tmpls = $(doc).filter('template');



            tmpls.each(function() {

                this.view_templates[this.id] = $.jqotec($.unescapeHTML(this.innerHTML));

            });

        });

    },



    render: function() {

        var tpldata = {name: 'Ville', thing: 'Suomi'};

        $('#display').jqoteapp(this.view_templates.greeting_template, tpldata);

    },



    events: {

        click input[type=button]: additionalTransactions

    },



    additionalTransactions: function() {

        this.render();

    }



});

This is probably (?) pretty straightforward and/or obvious, but me being somewhere on the Backbone.js learning curve, I'd much appreciate any help with this!! Thanks!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

charlesmarions

Add To Favorites

Follow

Total Points: 310

Total Questions: 96

Total Answers: 107

Location: Netherlands

Member since Wed, Feb 8, 2023

1 Year ago

answered 13 Years ago ryanulyssesb · Accepted Answer

Your view_templates instance variable is fine (and a good idea as well). You just have to be sure that you're using the right this inside your $.get() callback and inside your tmpls.each() call. I think you want your initialize to look more like this:

initialize: function() {

    this.view_templates = { };



    var _this = this;

    $.get('js/Test2Templates.tpl', function(doc) {

        var tmpls = $(doc).filter('template');

        tmpls.each(function() {

            _this.view_templates[this.id] = $.jqotec($.unescapeHTML(this.innerHTML));

        });

    });

},

I'm not sure which this.id you want inside the tmpls.each() but I'm guessing that you want the DOM id attribute from the current template so I left it as this.id.

The this.view_templates assignment in your constructor (initialize) is needed because you presumably want each instance of the view to have its own copy of the array. Creating a new view instance doesn't do a deep copy of the the view so if you just have:

MessageView = Backbone.View.extend({

    view_templates: {},

    // ...

then all the instances will end up sharing the same view_templates object and view_templates will behave more like a class variable than an instance variable.

You can specify your instance variables in the view definition (i.e. the Backbone.View.extend() call) as a form of documentation but you will want to initialize any of them that should behave as an instance variable in your initialize method; read-only or class variables like events can be left as part of the view's definition.