Question

我试图弄清楚如何在我的Marionette.js应用程序中使用路由器和控制器。我可以在App的启动处理程序中启动初始页面，但我似乎无法弄清楚如何处理其他路由。这个SPA并不复杂，我的用户只有三页。一个是引导表视图，车辆表视图和单个车辆的视图。在我弄清楚这种路由是如何工作之前，我并不担心单一的车辆视图。

// 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，表格骨架将呈现，但不会呈现数据。集合在之前：开始时加载正常，模板很好。我必须两次去URL，但表没有数据，即使我的App.leads集合加载正常。我的console.log输出确认我正在尝试这条路线。

我想在用户进入#leads路线时隐藏车辆区域。当用户访问#vehicles时，我想隐藏我的潜在客户表并显示车辆（来自我的启动处理程序的相同视图）。

我觉得我就在那里，但遗漏了一些基本的东西。

Answer 1

通过查看您的vehicles和leads地区，我怀疑您是否误解了地区的作用。如果您希望它们相互交换，那么您只需要创建一个区域，并且当您想要显示车辆时，可以创建该区域.show( new VehiclesView() );，当您希望线索更换车辆时，.show( new LeadsView() );。

这是一个有效的例子：

＆＃13;

var app = new Mn.Application();

var Controller = Mn.Object.extend({
  leads: function(){
    app.regions.setActive('leads').getRegion('main').show( new LeadsView() );
  },
  vehicles: function(){
    app.regions.setActive('vehicles').getRegion('main').show( new VehiclesView() );
  }
});

var VehiclesView = Mn.ItemView.extend({
  template: _.template('،°. ˘Ô≈ôﺣ » » »')
});
var LeadsView = Mn.ItemView.extend({
  template: _.template("( /.__.)/ (.__.)")
});

var AppLayoutView = Mn.LayoutView.extend({
  el: '#app',
  regions: { main: 'main' },
  events: { 'click nav a': 'onClick' },
  onClick: function(evt){
    evt.preventDefault();
    var viewName = evt.currentTarget.dataset.view;
    app.controller[viewName]();
    app.router.navigate(viewName);
  },
  setActive: function(viewName){
    /** it might seem that it is easier to just 
    make the link bold on click, but you would have 
    to handle it if you want to make it active on page load */
    this.$('nav a').
      removeClass('active').
      filter('[data-view="'+viewName+'"]').
      addClass('active');
    return this;
  }
});

app.on('start',function(){
  
  app.regions = new AppLayoutView();
  
  app.controller = new Controller();
  app.router = new Mn.AppRouter({
    controller: app.controller
  });
  Backbone.history.start({pushState: true});
  
  /** show initial content */
  app.controller.leads();
  app.router.navigate('leads');
  
});

app.start();

＆＃13;

.active { font-weight :bold ;}

＆＃13;

<script src='http://code.jquery.com/jquery.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.4.3/backbone.marionette.js'></script>
  
<div id="app">
  <nav>
    <a href="#" data-view="vehicles">Vehicles</a>
    <a href="#" data-view="leads">Leads</a>
  </nav>
  <main></main>
</div>

＆＃13;

如何在Marionette.js中显示和隐藏区域？

1 个答案: