Question

Backbone Marionette.Collection在MyApp.addInitiliazer方法中调用时从服务器呈现数据但在Marionette.AppRouter中调用时不呈现（未在html上显示）为什么它不呈现我被联合使用它是a a a a错误？

更新当我导航到/ app＃other然后返回/ app＃samples collection视图不显示数据。如果你更好地为这个应用程序配备请告诉我，我很高兴。

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

我猜对象和范围有问题。请检查您是否可以访问它们而不是未定义。

如果您需要更多帮助，可以使用完整的代码

路线变化的骨干木偶集合视图渲染视图与数据不起作用

1 个答案: