13

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

4

1 回答 1

17

您的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的可以作为视图定义的一部分。

于 2011-10-03T03:10:17.133 回答