Question

我正在创建一个简单的Backbone应用，路由无效。这是我的路由器。

define(function(require) {
  'use strict';

  var Backbone = require('backbone');
  var Header = require('views/header.view');
  var MainBody = require('views/main.body.view');

  var Router = Backbone.Router.extend({
    routes: {
      "": "main",
      "about/": "about"
    },

    main: function() {
      var header = new Header();
      $('#header').html(header.render());

      var body = new MainBody();
      $('#app').html(body.render());
    },

    about: function() {
      console.log("About");
    }
  });

  return Router;
});

我按预期点击/路线，但当我转到/about时，它从未点击about功能。我应该在某个地方的网址中有哈希吗？还有什么可能会导致这个问题？

Answer 1

这是因为路线是明确匹配的，因此"about/": "about"将匹配/about/而"about": "about"将匹配/about

有一种方法可以匹配/about和/about/，并且需要使用可选的匹配器(matcher)，因此您的路由哈希键将如下所示

"about(/)": "about"

要使无哈希路由起作用，您需要运行Backbone.history.start({pushState: true})。

Answer 2

根据backbonejs文档，应按如下方式定义和解决路由器：

var Workspace = Backbone.Router.extend({

  routes: {
    "help":                 "help",    // #help
    "search/:query":        "search",  // #search/kiwis
    "search/:query/p:page": "search"   // #search/kiwis/p7
  },

  help: function() {
    ...
  },

  search: function(query, page) {
    ...
  }

});

因此，当您键入http://<URL>/backbonepage#help时，将调用帮助功能

骨干路由不起作用

2 个答案: