Backbone.js просматривать переменные экземпляра?

Я изучаю Backbone.js и пытаюсь выяснить, возможно ли иметь переменные экземпляра в представлениях Backbone.

Моя цель - загрузить шаблоны представлений из внешнего файла при создании экземпляра представления. В настоящее время я храню их в глобальной переменной в глобальном пространстве имен приложения Backbone, но было бы проще хранить шаблоны в переменных экземпляра представления. В настоящее время я настроил это следующим образом:

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();
    }

});

Но вместо того, чтобы использовать "шаблоны", определяемые как глобальные var, я хотел бы создать "шаблоны" в функции инициализации представления в этих строках (но это не сработает):

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();
    }

});

Это, вероятно, (?) довольно просто и/или очевидно, но я где-то на кривой обучения Backbone.js, я бы очень признателен за любую помощь в этом! Спасибо!

Ответы

Ответ 1

Ваша переменная экземпляра view_templates в порядке (и хорошая идея). Вы просто должны быть уверены, что используете правильный this в своем обратном вызове $.get() и внутри своего вызова tmpls.each(). Я думаю, вы хотите, чтобы ваш initialize выглядел следующим образом:

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));
        });
    });
},

Я не уверен, какой this.id вы хотите внутри tmpls.each(), но я предполагаю, что вы хотите использовать атрибут DOM id из текущего шаблона, поэтому я оставил его как this.id.

Назначение this.view_templates в вашем конструкторе (initialize) необходимо, потому что вы предположительно хотите, чтобы каждый экземпляр представления имел свою собственную копию массива. Создание нового экземпляра представления не делает глубокую копию представления, поэтому, если у вас есть только:

MessageView = Backbone.View.extend({
    view_templates: {},
    // ...

тогда все экземпляры будут совместно использовать один и тот же объект view_templates, а view_templates будет вести себя скорее как переменная класса, чем переменная экземпляра.

Вы можете указать переменные экземпляра в определении представления (т.е. вызов Backbone.View.extend()) в качестве формы документации, но вы хотите инициализировать любую из них, которая должна вести себя как переменная экземпляра в вашем методе initialize; только для чтения или "переменные класса", такие как events, могут быть оставлены как часть определения вида.