アクセス変数

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'); 
     } 
    }); 

。しかし、私のコンソールでは未定義と表示されます。私は変数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に渡す理由は機能しませんか？

initialize関数のrender関数を、ラップされたバージョンの関数underscore's wrapを使用してオーバーライドしているためです。

それは仕事ができる、しかし、あなたがラップするとき考慮にパラメータを取る必要があると思います：

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の場合と同じことです。

ラップ事が不要であることをより簡単な方法

、それだけでどんなメリットや追加機能なしHomePageビューをcomplexifyingています。あなたが必要があると思い

唯一のこと：あなたが初期化するオプションを渡したい場合は

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

あなたは、使用をオプションのparam（{}）

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); 

関数は関数を返すので、関数を呼び出す必要があります。

 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'); 
    } 
});