骨幹樣板：「這個模型是未定義的」

Question

我是一個骨幹新手，所以我有點摸索得到一個應用程序設置。我使用骨幹模板（https://github.com/tbranyen/backbone-boilerplate）和github查看器（https://github.com/tbranyen/github-viewer）作爲參考，但在運行時我似乎正在獲取「this.model未定義」。

這是我目前的router.js：

define([ 
    // Application. 
    "app", 

    //Modules 
    "modules/homepage" 
], 
    function (app, Homepage) { 
     "use strict"; 

     // Defining the application router, you can attach sub routers here. 
     var Router = Backbone.Router.extend({ 
      initialize: function(){ 
       var collections = { 
        homepage: new Homepage.Collection() 
       }; 

       _.extend(this, collections); 

       app.useLayout("main-frame").setViews({ 
        ".homepage": new Homepage.Views.Index(collections) 
       }).render(); 
      }, 

      routes:{ 
       "":"index" 
      }, 

      index: function() { 
       this.reset(); 
       this.homepage.fetch(); 
      }, 

      // Shortcut for building a url. 
      go: function() { 
       return this.navigate(_.toArray(arguments).join("/"), true); 
      }, 

      reset: function() { 
       // Reset collections to initial state. 
       if (this.homepage.length) { 
        this.homepage.reset(); 
       } 

       // Reset active model. 
       app.active = false; 
      } 

     }); 

     return Router; 
    } 
); 

而且我homepage.js模塊：提前爲幫助

define([ 
    "app" 
], 
function(app){ 
    "use strict"; 

    var Homepage = app.module(); 

    Homepage.Model = Backbone.Model.extend({ 
     defaults: function(){ 
      return { 
       homepage: {} 
      }; 
     } 
    }); 

    Homepage.Collection = Backbone.Collection.extend({ 
     model: Homepage.Model, 

     cache: true, 

     url: '/app/json/test.json', 

     initialize: function(models, options){ 
      if (options) { 
       this.homepage = options.homepage; 
      } 
     } 
    }); 

    Homepage.Views.Index = Backbone.View.extend({ 
     template: "homepage", 
     el: '#mainContent', 

     render: function(){ 
      var tmpl = _.template(this.template); 

      $(this.el).html(tmpl(this.model.toJSON())); 

      return this; 
     }, 

     initialize: function(){ 
      this.listenTo(this.options.homepage, { 
       "reset": function(){ 
        this.render(); 
       }, 

       "fetch": function() { 
        $(this.el).html("Loading..."); 
       } 
      }); 
     } 
    }); 

    return Homepage; 
}); 

謝謝！

更新：多少谷歌搜索（你應該看到我有多少標籤已打開），我覺得我取得進展的一點點，但仍沒有運氣了。我更新了我的路由器具備以下條件：

app.useLayout("main-frame").setViews({ 
    ".homepage": new Homepage.Views.Index() 
}).render(); 

我提出了一些修改，我homepage.js模塊到現在這個樣子：

define([ 
    "app", 
    ["localStorage"] 
], 
function(app){ 
    "use strict"; 

    var Homepage = app.module(); 

    Homepage.Model = Backbone.Model.extend({ 

     defaults: function(){ 
      return { 
       homepage: {} 
      }; 
     } 
    }); 

    Homepage.Collection = Backbone.Collection.extend({ 
     //localStorage: new Backbone.LocalStorage("Homepage.Collection"), 

     refreshFromServer: function() { 
      return Backbone.ajaxSync('read', this).done(function(data){ 
       console.log(data); 
       //save the data somehow? 
      }); 
     }, 

     model: Homepage.Model, 

     cache: true, 

     url: '/app/json/test.json', 

     initialize: function(options){ 
      if (options) { 
       this.homepage = options.homepage; 
      }else{ 
       //this.refreshFromServer(); 
      } 
     } 
    }); 

    Homepage.Views.Index = Backbone.View.extend({ 
     template: "homepage", 
     el: '#mainContent', 

     initialize: function(){ 
      var self = this; 
      this.collection = new Homepage.Collection(); 
      this.collection.fetch().done(function(){ 
       self.render(); 
      }); 
     }, 

     render: function(){ 
      var data = this.collection; 

      if (typeof(data) === "undefined") { 
       $(this.el).html("Loading..."); 
      } else { 
       $(this.el).html(_.template(this.template, data.toJSON())); 
      } 
      return this; 
     } 
    }); 

    return Homepage; 
}); 

正如你所看到的，我有localStorage的代碼但現在已經發表了評論，因爲我只想讓所有事情都先做好。最終目標是進行初始調用，從JSON文件加載數據，然後使用localStorage繼續。該應用稍後會在用戶與我的應用進行多次交互之後提交數據。

雖然主模塊沒有在主視圖中填充#mainContent容器，但我正在加載主視圖。

我做了所有的搜索引擎優化，我可以但沮喪，它只是沒有爲我沉沒。再次感謝您的關注，並感謝您的反饋！

Answer 1

我認爲你的類層次結構在這裏有點不可思議。例如，Homepage.Collection的實例實際上是在選項之外分配一個homepage屬性。然後，您將Homepage.Collection的實例作爲homepage選項傳遞給Homepage.Views.Index ...這有點難以遵循。

這就是說，在我看來，你的問題很簡單，當你建立你的Homepage.Views.Index你是不是提供一個model選項：

new Homepage.Views.Index(collections) 

collections沒有一個model特性，因此我不看到this.model.toJSON()後來在視圖中可以有一個訪問模型。基本上，你似乎想要Homepage.Views.Index處理模型的集合，而不僅僅是一個。所以你可能需要一個在你的render函數中的循環，它會超過this.collection（並且你應該改變你的視圖的構造，使其具有collection選項而不是homepage選項）。

如果我在這裏丟失了某些東西，或者我不清楚這是因爲我之前提到的這種數據模型的奇怪之處。隨意澄清你如何得出它的理由，我們可以再試一次:)

Answer 2

這個示例代碼你有一點困惑，但我認爲問題在於以下兩行代碼：

".homepage": new Homepage.Views.Index(collections) 
$(this.el).html(tmpl(this.model.toJSON())); 

它看起來像你傳遞一個集合的觀點，但在視圖中使用this.model，因此錯誤「this.model是不確定的」，因爲它確實是不確定的。

如果你沒有任何急於，我可以建議你重新開始。看起來你太快嘗試太多了。我看到你有骨幹，requirejs（或其他模塊加載器）和樣板，這對於一個剛接觸骨幹的人來說非常重要。相信我，我知道，因爲我也是比較新的。也許從一些你好的世界的東西開始，慢慢地走上前進的道路。否則，通過各種項目的代碼攻擊你可能會感到困惑。