訪問變量

Question

我的路由器

var AppRouter = Backbone.Router.extend({ 
     routes: { 
      ':*':'home', 
      'home' : 'home', 
      'home/:a' : 'home', 
      '*whatever' : '404' 

     }, 
     home: function (a) { 
      document.title = siteTitle + ' - Home'; 
      homePage = new HomePage; 
      homePage.render(a); 
     }, 
     404: function(){ 
      document.title = siteTitle + ' - 404'; 
      fofPage = new FoFPage; 
      fofPage.render(); 
     } 

    }); 

我家的觀點

var HomePage = Backbone.View.extend({ 
     initialize: function (options) { 
      _.bindAll(this, 'beforeRender', 'render', 'afterRender'); 
      var _this = this; 
      this.render = _.wrap(this.render, function (render) { 
       _this.beforeRender(); 
       render(); 
       _this.afterRender(); 
       return _this; 
      }); 
     }, 

     beforeRender: function() { 
      console.log('beforeRender'); 
     }, 

     el: $('#indexcontent'), 

     template: _.template(homeHTML, {}), 

     render: function (a) { 
      (a == null) ? Backbone.history.navigate('home'): Backbone.history.navigate('home/' + a); 
      console.log('Passed parameter is ' + a); 
      this.$el.html(this.template); 

     }, 

     afterRender: function() { 
      $('pre code').each(function (i, block) { 
       hljs.highlightBlock(block); 
      }); 
      console.log('afterRender'); 
     } 
    }); 

我想抓住從路由器變量a查看。但它顯示在我的控制檯中未定義。我在初始化時嘗試了變量options，但沒有運氣。 感謝

Answer 1

var AppRouter = Backbone.Router.extend({ 
     routes: { 
      ':*':'home', 
      'home' : 'home', 
      'home/:a' : 'home', 
      '*whatever' : '404' 

     }, 
     home: function (a) { 
      document.title = siteTitle + ' - Home'; 
      homePage = new HomePage({route: a}); 
      homePage.render(); 
     }, 
     404: function(){ 
      document.title = siteTitle + ' - 404'; 
      fofPage = new FoFPage; 
      fofPage.render(); 
     } 

    }); 

查看

var HomePage = Backbone.View.extend({ 
     initialize: function (options) { 
      this.options = options; 
      _.bindAll(this, 'beforeRender', 'render', 'afterRender'); 
      var _this = this; 
      this.render = _.wrap(this.render, function (render) { 
       _this.beforeRender(); 
       render(_this.options['route']); 
       _this.afterRender(); 
       return _this; 
      }); 
     }, 

     beforeRender: function() { 
      console.log('beforeRender'); 
     }, 

     el: $('#indexcontent'), 

     template: _.template(homeHTML, {}), 

     render: function (a) { 
      (a == null) ? Backbone.history.navigate('home'): Backbone.history.navigate('home/' + a); 
      console.log('Passed parameter is ' + a); 
      this.$el.html(this.template); 

     }, 

     afterRender: function() { 
      $('pre code').each(function (i, block) { 
       hljs.highlightBlock(block); 
      }); 
      console.log('afterRender'); 
     } 
    }); 

Answer 2

當你找到了答案，我將解釋爲什麼您最初的代碼不能正常工作，甚至更多。

爲什麼要傳遞給render不起作用？

因爲您使用underscore's wrap函數覆蓋initialize函數中的render函數並使用包裝版本。

它可以工作，但包裝時你需要採取的參數考慮：

this.render = _.wrap(this.render, function(render, a) { 
    this.beforeRender(); 
    render.call(this, a); // here, pass the argument 
    this.afterRender(); 
    return this; 
}); 

還要注意，你不需要var _this = this因爲你只是更換成員功能上下文在被調用時自動應用。 _.bindAll這是沒用的。

更簡單的方法

這包東西是不必要的，它只是complexifying的HomePage觀點沒有任何好處或添加的功能。

的唯一的事情你需要：

var HomePage = Backbone.View.extend({ 
    el: $('#indexcontent'), 

可以忽略選項參數（該{}）

template: _.template(homeHTML), 

    initialize: function(options) { 

，如果你想通過選項進行初始化，使用以下模式之一：

 this.options = options || {}; // make sure it's an object. 

或者更好的是，確保它是一個拷貝的對象，具有默認值。

 this.options = _.extend({ 
      route: "default-value" 
     }, options); 
    }, 

    beforeRender: function() { 
     console.log('beforeRender'); 
    }, 

    render: function(route) { 
     this.beforeRender(); 

在路由器中做重定向，這是他的角色。

 // (a == null) ? Backbone.history.navigate('home'): Backbone.history.navigate('home/' + a); 

     console.log('Passed parameter is ' + route || this.options.route); 

underscore's _.template函數返回一個函數，所以你需要調用它。

 this.$el.html(this.template()); 

     this.afterRender(); 
     return this; 
    }, 

    afterRender: function() { 

避免全球jQuery的功能和範圍界定喜歡你搜索到的視圖元素及其孩子this.$(selector)。

 this.$('pre code').each(function(i, block) { 
      hljs.highlightBlock(block); 
     }); 
     console.log('afterRender'); 
    } 
});