13

私は Backbone.js を学んでおり、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()の DOM 属性が必要だと推測しているので、 として残しました。idthis.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 に答える