Marionette JS 路由器有问题

Question

我的路由器和控制器有问题。在我的应用 before:start 上，我有一个处理程序可以获取 Leads 和 Vehicles 的集合。

我只有一个区域，布局视图为：

var App = new Marionette.Application({});

var AppLayoutView = Marionette.LayoutView.extend({
  el: 'body',
  regions: {
    main: '#app-container'
  }
});

我的控制器是：

var Controller = Marionette.Object.extend({
    leads: function() {
      App.regions.main.show(new App.leadsTableView({collection: App.leads}));
    },
    vehicles: function() {
      App.regions.main.show(new App.vehiclesTableView({collection: App.vehicles}));
    }
});

在我的启动处理程序中：

App.on('start', function() {
  App.regions = new AppLayoutView();
  App.router = new Marionette.AppRouter({
    controller: new Controller(),
    appRoutes: {
      'leads': 'leads',
      'vehicles': 'vehicles'
    }
  });

  Backbone.history.start({pushState: true});
});

App.start();

如何从特定路线开始？而且，当用户转到#vehicles 时，如何让该区域加载新视图？我缺少有关路由器的信息。

编辑：当我去时，#leads 在我的 URL 中，我的车辆视图出现了。当我点击指向#leads 和#vehicles 的链接时，它们不起作用。

Answer 1

默认路线

您可以通过在路线末尾添加 "splat" 路线（以 * 开头的路线）来定义默认值。我喜欢使用 *default 使意图显而易见：

appRoutes: {
  'leads': 'leads',
  'vehicles': 'vehicles',
  '*default': 'leads'
}

破碎link

因为您正在使用 pushstate 路由，所以视图 URL 是 /vehicles 而不是散列片段 #vehicles。您不应再使用哈希片段网址。

这是一种触发 pushState 路由的简单方法，点击次数 link：

$('a[href]').on('click', function(e) {
  e.preventDefault();
  var href = e.target.getAttribute('href');
  App.router.navigate(href, { trigger: true })
});

您可能会发现此 post about moving from hash fragment to pushState routing 有用。

您还需要配置您的服务器以将与您的路由匹配的请求传递到主应用程序页面 - 例如，它需要理解 http://localhost/app/vehicle 应该由 http://localhost/app 处理。

Marionette JS 路由器有问题

Having trouble with Marionette JS router

javascript

backbone.js

backbone-routing

marionette

默认路线

破碎link