访问变量

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