javascript - Backbone.js 查看实例变量？

Question

我正在学习 Backbone.js 并试图弄清楚是否可以在 Backbone View 中使用实例变量。

我的目标是在实例化 View 时从外部文件加载 View 的模板。目前我将它们存储在 Backbone 应用程序的全局命名空间中的全局变量中，但将模板存储在 View 的实例变量中会更清晰。目前我是这样设置的:

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

});

但是我不想使用被定义为全局变量的"template"，而是想在 View 的初始化函数中创建"template"，按照这些行(但这不起作用):

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 实例变量很好(也是一个好主意)。您只需确保在 $.get() 回调和 tmpls.each() 中使用正确的 this > 打电话。我认为您希望您的 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));
        });
    });
},

我不确定 tmpls.each() 中你想要哪个 this.id 但我猜你想要 DOM id 属性，所以我将其保留为 this.id。

构造函数 (initialize) 中的 this.view_templates 赋值是必需的，因为您可能希望 View 的每个实例都有自己的数组副本。创建一个新的 View 实例不会对 View 进行深度复制，所以如果您只有:

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

然后所有实例最终将共享相同的 view_templates 对象，并且 view_templates 将表现得更像类变量而不是实例变量。

您可以在 View 定义中指定您的实例变量(即 Backbone.View.extend() 调用)作为一种文档形式，但您需要初始化它们中的任何一个，它们应该表现为initialize 方法中的实例变量；只读或“类变量”，如 events 可以保留为 View 定义的一部分。