骨干视图不会呈现传递给它的模板

Question

我需要能够将不同的模板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函数。但是它不应该被设置？顺便说一下，如果我在retrieveTemplate函数中使用模板ID的名称进行硬编码，则此代码有效。

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

编辑：我拿出调用索引路线的第二线延伸，现在我得到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(); 
})(); 

Answer 1

您的路由器这样说：

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

所以你给一个template: '...'到App.Views.Tables。在App.Views.Tables的initialize看起来是这样的：

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。骨干网将提出一个view's constructor options in this.options for you，所以你只需要说：

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

---

几个其他的事情要考虑：

1. 你在你的路由器的index方法有些意外的全局变量，你应该有var t和var tables而不仅仅是t和tables。
2. 视图的render方法通常会返回this，因此您可以说$x.append(v.render().el)，因此您可能需要调整render方法以符合约定。

Answer 2

你可能需要结合上下文。下划线可以帮助你。

.bindAll或.bind应该这样做。

我通常只是在初始化时使用_.bindAll，如下所示。

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

希望这会有所帮助，祝你好运。