無法在主幹視圖中的model.set之後引用主幹模型

Question

我想通過將更改事件綁定到視圖模型來獲取自我呈現的視圖。我在PageView上創建了一個自定義函數，它將Pages集合中的模型作爲參數，並使用this.model.set（data）來觸發模型更改事件。當我通過this.page.load（Pages.at（index））從AppView中的Pages集合中傳遞一個Page模型時，會觸發這種情況。儘管我遇到了一些問題。

1. 更改事件僅在兩個不同模型之間來回切換時觸發一次，我可以通過運行this.model.clear（{silent：true}）來解決，但這並不理想。
2. this.model在除了PageView中的load（）函數之外的任何函數中都是未定義的，這實際上是主要問題，因爲如果模型未定義，我顯然無法觸發this.render。因此，測試：function（）。

無論如何，這裏是我的AppView和PageView函數的代碼。預先感謝您的幫助。

define([ 
     // These are path alias that we configured in our bootstrap 
     'jquery', 
     'underscore', 
     'backbone', 
     'handlebars', 
     'views/pageView', 
     'views/menuView', 
     'collections/pages' 
    ], function($, _, Backbone, Handlebars,PageView,MenuView,Pages){ 
     var AppView = Backbone.View.extend({ 

      //Stores a reference to our main menu 
      mainMenu:{}, 

      //Stores reference to current page 
      page:{}, 

      //The parent div 
      el:'#app', 

      //Events that are being listened to on #app 
      events:{"click"  : "active"}, 

      //Process to run when this view is initialized 
      initialize:function(){ 

       //Load our Pages Collection 
       Pages.reset(this.model.pages); 

       //Load the main menu 
       this.mainMenu = new MenuView; 
       this.mainMenu.model = this.model.main_menu; 
       this.mainMenu.render(); 

       //Loads the page view 
       this.page = new PageView({model:Pages.at(0)}); 
      }, 

      //Currently just renders a page view with a designated model from the Pages collection 
      render:function(index){ 
       this.page.load(Pages.at(index)); 
      }, 

      active:function(event){ 
       $('.menu a').removeClass('active'); 
       $('.menu a[href="' + event.target.hash + '"]').addClass('active'); 
      } 

     }); 
     return AppView; 
     // What we return here will be used by other modules 
    }); 



      define([ 
      // These are path alias that we configured in our bootstrap 
      'jquery', 
      'underscore', 
      'backbone', 
      'handlebars', 
      'text!templates/page.html', 
     ], function($, _, Backbone, Handlebars, pageViewTemplate){ 
      var PageView = Backbone.View.extend({ 

       //Define the default template 
       template: Handlebars.compile(pageViewTemplate), 

       //The parent div for this element 
       el:'#content', 

       initialize:function(){ 
        this.model.bind('change',this.test); 
       }, 
       load:function(data){ 
        this.model.set(data);  
       }, 
       //Render function 
       render:function(){ 
        this.$el.html(this.template(this.model.toJSON())); 
        return this; 
       }, 
       test:function(){ 
        console.log(this.model); 
        console.log('change'); 
       } 
      }); 
      return PageView; 
      // What we return here will be used by other modules 
     }); 

Answer 1

是否在綁定調用中設置上下文爲您解決問題？

initialize:function(){ 
    this.model.bind('change',this.test, this); 
},