Я пытаюсь выяснить, как использовать маршрутизатор и контроллер в приложении Marionette.js. Я могу запустить начальную страницу в стартовом обработчике своего приложения, но я не могу понять, как обращаться с другими маршрутами. Этот SPA не является сложным, и у меня есть только три страницы для моих пользователей. Один из них представляет собой табличный вид, вид стола транспортного средства и вид на один автомобиль. Я не беспокоюсь об одном взгляде на автомобиль, пока не выясню, как работает эта маршрутизация.Как показать и скрыть регионы в Marionette.js?
// my app
var App = new Marionette.Application({});
// my lead and vehicle model rows
App.vehicleRowView = Marionette.ItemView.extend({
tagName: 'tr',
template: '#vehicle-row-tpl'
});
App.leadRowView = Marionette.ItemView.extend({
tagName: 'tr',
template: '#lead-row-tpl'
});
// composite views for the tables
App.vehicleTableView = Marionette.CompositeView.extend({
tagName: 'div',
className: 'row',
template: '#vehicles-table',
childViewContainer: 'tbody',
childView: App.vehicleRowView
});
App.leadsTableView = Marionette.CompositeView.extend({
tagName: 'div',
className: 'row',
template: '#leads-table',
childViewContainer: 'tbody',
childView: App.leadRowView
});
// controller
var Controller = Marionette.Object.extend({
leads: function() {
var leadstable = new App.leadsTableView({
collection: this.leads
});
App.regions.leads.show(leadstable);
},
vehicles: function() {
console.log('vehicles...');
}
});
// router
var AppRouter = Marionette.AppRouter.extend({
controller: new Controller,
appRoutes: {
'leads': 'leads',
'vehicles': 'vehicles'
}
});
App.router = new AppRouter;
App.vehicles = [];
App.leads = [];
// Start handlers
App.on('before:start', function() {
this.vehicles = new Vehicles();
this.vehicles.fetch();
this.leads = new Leads();
this.leads.fetch();
var appContainerLayoutView = Marionette.LayoutView.extend({
el: '#app-container',
regions: {
vehicles: '#vehicles-content',
leads: '#leads-content'
}
});
this.regions = new appContainerLayoutView();
});
App.on('start', function() {
Backbone.history.start({pushState: true});
var vehiclesLayoutView = new this.vehicleTableView({
collection: this.vehicles
});
App.regions.vehicles.show(vehiclesLayoutView);
});
App.start();
На старте передняя страница в порядке. Тем не менее, когда я перехожу к #leads, таблица моих проводок не отображается. На самом деле маршрут не происходит, и URL-адрес изменяется на/# ведет. Если я перейду к этому URL-адресу, скелет таблицы отобразит, но не данные. Коллекции загружаются штрафом до: start, и шаблоны в порядке. Мне нужно дважды перейти к URL, но в таблице нет данных, хотя коллекция App.leads загружена в порядке. Мой вывод console.log подтверждает, что я ударяю по маршруту.
Я хочу скрыть регион транспортных средств, когда пользователь переходит на маршрут #leads. Когда пользователь переходит к #vehicles, я тогда хочу скрыть таблицу с выводами и отобразить транспортные средства (тот же вид из моего обработчика).
Я чувствую, что я здесь, но отсутствует что-то основное.