Backbone.js查看实例变量？

Question

我正在学习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();
    }

});

但是我没有使用"模板"定义为全局变量,而是想在视图的初始化函数中创建"模板",这些行(但这不起作用):

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学习曲线的某个地方,我非常感谢任何帮助!谢谢!

Answer 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()但我猜你想要id从当前模板中获取DOM 属性,所以我把它留作了this.id.

将this.view_templates在构造函数赋值(initialize需要),因为你可能想要的视图的每个实例有它自己的数组的副本.创建新的视图实例不会对视图执行深层复制,因此如果您只有:

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

然后所有实例最终将共享同一个view_templates对象,并且view_templates更像是类变量而不是实例变量.

您可以在视图定义(即Backbone.View.extend()调用)中将实例变量指定为文档形式,但是您需要初始化任何应该在initialize方法中作为实例变量运行的实例变量; 只读或"类变量" events可以保留为视图定义的一部分.