Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Backbone.js view instance variables?

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!

like image 531
Ville Avatar asked Oct 03 '11 02:10

Ville


People also ask

Is Backbone JS still used?

Backbone. Backbone has been around for a long time, but it's still under steady and regular development. It's a good choice if you want a flexible JavaScript framework with a simple model for representing data and getting it into views.

What is El property of backbone JS view?

The Backbone. js View el method defines the element that is used as the view reference. this. el is created from the view's tagName, className, id and attributes properties, if specified.

Is Backbone JS frontend or backend?

Backbone. js is a minimalistic framework which aims to provide a simple set of data structures and features that you can use to create a structured web application's front-end.

Is backbone a MVC?

Backbone. js is a model view controller (MVC) Web application framework that provides structure to JavaScript-heavy applications. This is done by supplying models with custom events and key-value binding, views using declarative event handling and collections with a rich application programming interface (API).


1 Answers

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.

like image 63
mu is too short Avatar answered Sep 28 '22 13:09

mu is too short