如何在Marionette.js中显示和隐藏区域? [英] How can I show and hide regions in Marionette.js?

问题描述

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

I am trying to figure out how to use a router and controller in my Marionette.js application. I am able to start the initial page in my App's start handler, but I can't seem to figure out how to handle other routes. This SPA isn't complex, where I only have three pages for my users. One is a leads table view, a vehicle table view, and a view of a single vehicle. I'm not worried about the single vehicle view until I figure out how this routing works.

// 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时，leads表不会呈现.实际上，路由不会发生，并且URL更改为/#leads.如果然后转到该URL，则将显示表框架，而不是数据.集合在before:start上加载良好，模板也很好.我必须两次访问该URL，但是即使我的App.leads集合加载正常，该表也没有数据.但是，我的console.log输出确认我正在路由.

On start, the front page is fine. However, when I go to #leads, my leads table doesn't render. Actually, the route doesn't happen, and the URL changes to /#leads. If I then go to that URL, the table skeleton renders, but not the data. The collections are loaded fine on before:start, and the templates are fine. I have to go to the URL twice, but the table has no data, even though my App.leads collection is loaded fine. My console.log output confirms I am hitting the route, though.

我想在用户转到#leads路线时隐藏车辆区域.当用户转到#vehicles时，我想隐藏线索表并显示车辆(与我的启动处理程序相同的视图).

I want to hide the vehicles region when the user goes to the #leads route. When the user goes to #vehicles, I then want to hide my leads table and display the vehicles (same view from my start handler).

我感觉自己就在那里，但是缺少一些基本知识.

I feel like I'm right there, but missing something basic.

推荐答案

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

By looking at your vehicles and leads regions, I have a suspicion you've misunderstood the role of regions. If you expect them to swap one another, then you would create just one region and have that region .show( new VehiclesView() ); when you want to show vehicles, and .show( new LeadsView() ); when you want the leads to replace the vehicles.

这是一个可行的示例:

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

.active { font-weight :bold ;}

<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>

这篇关于如何在Marionette.js中显示和隐藏区域?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！