2

さまざまなテンプレートIDをさまざまなルートに渡すことができる必要があります。

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

    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 = App.Views.Tables({ collection: t, 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});
            this.$el.append(t.render().el);
            return this;
        }
    });

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

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

しかし、よりエラーが発生しますn is undefined。this.template私は自分の職務に引き継ぐ必要があると思いretrieveTemplateます。しかし、それはすでに設定されているべきではありませんか？ちなみに、このコードは、関数のテンプレートIDの名前でハードコーディングするとretrieveTemplate機能します。

編集：テンプレートはルーターの呼び出しから渡されていません。これが崩壊しているところです。

編集：私はインデックスルートの2行目で延長するための呼び出しを取りました、そして今私は得ますthis._configure is not a function

作業バージョン：

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

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

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

    App.Router = Backbone.Router.extend({
        routes: {
            '' : 'index',
            'send-message' : 'sendMessage',
            '*other' : 'other'
        },
        index: function() {
            var t = new (App.Collections.Tables.extend({ url: 'main-contact'}))();
            var tables = new (App.Views.Tables.extend({ collection: t, options: {template: 'mainContactTemplate' }}))();
            $('#web-leads').html(tables.render().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(options) {
            this.collection.on('reset', this.render, this);
            this.template = this.options.template;
        },
        render: function() {
            this.collection.each(this.addOne, this);
            return this;
        },
        addOne: function(model, options) {
            //console.log(model);
            var t = new App.Views.Table({ model: model, template: this.options.template});
            this.$el.append(t.render().el);
            return this;
        }
    });

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

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

2 に答える 2

1

おそらくコンテキストをバインドする必要があります。アンダースコアはそれを助けることができます。

.bindAllまたは.bindがそれを行う必要があります。

以下に示すように、私は通常、初期化中に_.bindAllを使用します。

...
initialize: function(options) {
    _.bindAll(this); // apply appropriate context
    this.template = options.template;
},
...

これがお役に立てば幸いです。

于 2013-01-08T21:42:08.710 に答える
1

あなたのルーターはこれを言います：

tables = App.Views.Tables({ collection: t, template: 'mainContactTemplate' });

だからあなたはに与えていtemplate: '...'ますApp.Views.Tables。initializeinは次のApp.Views.Tablesようになります。

initialize: function() {
    this.collection.on('reset', this.render, this);
}

したがって、オプションは無視されtemplateます。App.Views.Table（単数！）を見ると、次のようになります。

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

ただし、オプションApp.Views.Tableなしでインスタンス化されます。template

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

使用方法を修正する必要がありますApp.Views.Table。バックボーンはビューのコンストラクターオプションをthis.options提供するので、次のように言う必要があります。

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

考慮すべき他のいくつかの事柄：

  1. indexルーターのメソッドに偶発的なグローバルが含まれている場合は、とだけでなく、とを使用する必要がvar tあります。var tablesttables
  2. ビューのメソッドは通常、慣例に一致するようにメソッドを調整したい場合があると言うことができるようにrender戻ります。this$x.append(v.render().el)render
于 2013-01-08T23:18:22.027 に答える