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。

编辑：模板没有从路由器中的调用中传递。这就是它崩溃的地方。

编辑：我在索引路由的第二行拨打了扩展电话，现在我得到了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: '...'to App.Views.Tables。在看起来像这样initialize：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. Backbone 会为您放入视图的构造函数选项，this.options因此您只需说：

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

需要考虑的其他几件事：

  1. 您的路由器index方法中有一些意外的全局变量，您应该有var tandvar tables而不仅仅是tand tables。
  2. 视图的render方法通常会返回this，因此您可以说$x.append(v.render().el)您可能想要调整您的render方法以匹配约定。
于 2013-01-08T23:18:22.027 回答