Backbone Marionette收集視圖路徑更改渲染與數據視圖不起作用

Question

骨幹Marionette.CollectionView它調用MyApp.addInitiliazer方法時從服務器呈現數據，但在Marionette.AppRouter中調用時不呈現（不顯示在html上）爲什麼它不是渲染我是cofused它是一個錯誤？

更新： 當我導航到/ app＃other時，回到/ app＃samples collection view不顯示數據。如果你更好的apporache這個應用程序，請告訴我，我很高興。

App.js

var MyApp = new Backbone.Marionette.Application(); 
MyApp.addRegions({ 

    // Layout regions 
    menu: '#menu', 
    headermenu: '.top-menu', 
    content: '#views', 

    // Sub pages 
    innermenu: '#innermenu', 
    samples: '#sample-container' 
}); 

MyApp.vent.on("routing:started", function() { 
    if (!Backbone.History.started) { 
     Backbone.history.start({ appRoot: '/app#' }); 
    } 
}); 

SampleAppList.js

MyApp.SampleApp.SampleList = {}; 

MyApp.SampleApp.SampleList.Sample = Backbone.Model.extend({ 
    id: null, 
    name: '', 
    picture: '/assets/img/default-sample.jpg' 
}); 

MyApp.SampleApp.SampleList.SampleCollection = Backbone.Collection.extend({ 
    model: MyApp.SampleApp.SampleList.Sample, 
    url: '/api/samples' 
}); 

MyApp.SampleApp.SampleList.SampleItemView = Backbone.Marionette.ItemView.extend({ 
    template: "#sample-view", 
    tagName: 'li' 
}); 

MyApp.SampleApp.SampleList.SampleCollectionView = Backbone.Marionette.CollectionView.extend({ 
    itemView: MyApp.SampleApp.SampleList.SampleItemView, 
    tagName: 'ul', 
    className: 'sample-list', 
}); 

SampleApp.js

MyApp.SampleApp = {}; 

MyApp.SampleApp.IndexView = Backbone.Marionette.ItemView.extend({ 
    template: '#sample-layout' 
}); 

MyApp.SampleApp.IndexInnerMenuView = Backbone.Marionette.ItemView.extend({ 
    template: '#sample-view-inner-menu', 
}); 

MyApp.SampleApp.Router = Backbone.Marionette.AppRouter.extend({ 
    appRoutes: { 
     "samples": "LoadPage" 
    } 
}); 

MyApp.SampleApp.LoadPage = function() { 

    //utils.setDocumentTitle('samples'); 

    var index = new MyApp.SampleApp.IndexView(); 
    MyApp.content.show(index); 

    var inner = new MyApp.SampleApp.IndexInnerMenuView(); 
    MyApp.innermenu.show(inner); 

    var sCollection = new MyApp.SampleApp.SampleList.SampleCollection(); 
    sCollection.fetch(); 

    var cv = new MyApp.SampleApp.SampleList.SampleCollectionView({ collection: sCollection }); 
    MyApp.samples.show(cv); 

    console.log('Route: Samples'); 
}; 

MyApp.addInitializer(function() { 
    var router = new MyApp.SampleApp.Router({ 
     controller: MyApp.SampleApp 
    }); 
    MyApp.SampleApp.LoadPage(); 
    MyApp.vent.trigger("routing:started"); 
}); 

OtherApp.js

MyApp.OtherApp = {}; 

MyApp.OtherApp.IndexView = Backbone.Marionette.ItemView.extend({ 
    template: '#other-layout' 
}); 

MyApp.OtherApp.IndexInnerMenuView = Backbone.Marionette.ItemView.extend({ 
    template: '#other-view-inner-menu', 
}); 

MyApp.OtherApp.Router = Backbone.Marionette.AppRouter.extend({ 
    appRoutes: { 
     "other": "LoadOtherPage" 
    } 
}); 

MyApp.OtherApp.LoadOtherPage = function() { 
    var index = new MyApp.OtherApp.IndexView(); 
    MyApp.content.show(index); 

    var innermenu = new MyApp.OtherApp.IndexInnerMenuView(); 
    MyApp.innermenu.show(innermenu); 
}; 

MyApp.addInitializer(function() { 
    MyApp.OtherApp.Router = new MyApp.OtherApp.Router({ 
     controller: MyApp.OtherApp 
    }); 
    MyApp.vent.trigger("routing:started"); 
}); 

Answer 1

當然，這看起來很奇怪：

MyApp.SampleApp.Router = new MyApp.SampleApp.Router({ 
    controller: MyApp.SampleApp 
}); 

你不應該重寫MyApp.SampleApp.Router類，但實例化一個新的對象，如：

var router = new MyApp.SampleApp.Router({ 
    controller: MyApp.SampleApp 
}); 

看起來很奇怪的另一件事是你定義LoadPage函數的方式。它是一個控制對象的成員嗎？您應該定義一個控制器，如：

 var Controller = Marionette.Controller.extend({ 
     loadPage: function() { .... } 
    }) 

，並在MyApp.addInitializer與實例吧：

var controller = new Controller(); 

我想有一些錯誤的對象和範圍。請檢查您是否有權訪問它們，而不是使用undefined。

如果您需要更多的幫助，具有完整的代碼將他