1

テンプレートをビューに渡そうとしています。使用したいテンプレートがいくつかあり、ルーターでそれらを切り替えられるようにしたいと考えています。エラーは発生しませんが、結果は得られません。initialize2番目のビューではメソッドが呼び出されていないようです。これが私のコードです：

   (function() {
        window.App = {
            Models: {},
            Collections: {},
            Views: {},
            Router: {}
        };

        window.template = function(id) {
            return _.template( $('#' + id).html() );
        };

        var vent = _.extend({}, Backbone.Events);

        _.templateSettings.interpolate = /\[\[(.+?)\]\]/g;

        App.Router = Backbone.Router.extend({
            routes: {
                '' : 'index',
                'send-message' : 'sendMessage',
                '*other' : 'other'
            },
            index: function() {
                t = new (App.Collections.Tables.extend({ url: 'main-contact'}))();
                tables = new (App.Views.Tables.extend({
     collection: t, template: template('mainContactTemplate')}))();
                $('#web-leads').html(tables.el);
            },
            sendMessage: function() {
                t = new (App.Collections.Tables.extend({ url: 'send-message'}))();
                tables = new App.Views.Tables.extend({
     collection: t, template: template('sendMessageTemplate')});
                $('#web-leads').html(tables.el);
            },
            other: function() {

            }
        });

        // Main Contact
        App.Models.Table = Backbone.Model.extend({});

        App.Collections.Tables = Backbone.Collection.extend({
            model: App.Models.Table,
            initialize: function(models, options) {
                this.fetch({
                    success: function(data) {
                        //console.log(data.models);
                    }
                });
                if (options) {
                    this.url = this.url || options.url;
                }
            }
        });

        App.Views.Tables = Backbone.View.extend({
            tagName: 'ul',
            initialize: function() {
                this.collection.on('reset', this.render, this);
            },
            render: function() {
                return this.collection.each(this.addOne, this);
            },
            addOne: function(model) {
                var t = new App.Views.Table({ model: model, template: template});
                this.$el.append(t.render().el);
                return this;
            }
        });

        App.Views.Table = Backbone.View.extend({
            tagName: 'li',
            template: this.template,
            initialize: function (attrs) {
                this.options = attrs;
                console.log(this.options);
            },
            render: function() {
                this.$el.html(this.template(this.model.toJSON()));
                return this;
            }
        });



        new App.Router();
        Backbone.history.start();
    })();

編集：私はいくつかの括弧が欠けていました。しかし今、私は認識されない表現のエラーを受け取ります。Initializeが呼び出されています。

4

1 に答える 1

3

あなたがそれをしている方法App.Views.Tableは（私が知る限り）バックボーンでテンプレートを使用する「標準的な」方法です。もちろん、いくつかの選択肢があり、それらのどれもが言うまでもなく「間違っている」ものではありません。

そうは言っても、コードにはいくつかの問題があります。始めましょう：

template: this.template,

コードが実行されるときApp.Views.Tables、あなたはのインスタンスではなく、（後で）インスタンスを作成するために使用されるクラスを宣言するグローバルスペースにいます。ただし、その時点では、thisを参照するだけwindowです。あなたが本当にやりたいことはあなたの中にテンプレートを設定することですinitialize、それは私を次のように導きます：

initialize: function(options) {
     this.template = options.template;
},

しかし、最後の問題が1つあります。

var t = new App.Views.Table({ model: model, template: template});

その関数にはテンプレート変数がないので、実際に実行していtemplate: undefinedます。実際のテンプレートを使用する必要があります。

そうは言っても、テンプレートをビューに直接配置することを検討することをお勧めします。これは、次のような方法です。

template: Handlebars.compile('<span>{{test}}</span>'),

結局のところ、どのビューでも常に同じテンプレートを使用する必要がありますよね？また、次のものを移動することを検討することもできます。

render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
}

親クラスに追加して、テンプレート化されたすべてのビュー間で共有できるようにします。繰り返す必要はありません。

于 2013-01-08T17:59:24.557 に答える