Question

我查看了各种教程和文档，我仍然在使骨干路由器工作时遇到一些麻烦。我在OS X上的Sites文件夹中运行代码（网址为http://localhost/~plebrun）。 http://localhost/~plebrun/#foo和http://localhost/~plebrun/#type/books都不起作用。想法？

（注意：data_ *变量包含json数据）

  /****************************/
  /********** MODELS **********/
  /****************************/

  var Category = Backbone.Model.extend();
  var Phrase = Backbone.Model.extend();

  /****************************/
  /******** COLLECTIONS *******/
  /****************************/

  var Type = Backbone.Collection.extend({
    model: Category
  });

  /****************************/
  /********** VIEWS ***********/
  /****************************/

  var TypeView = Backbone.View.extend({   /* a Type is a list of Categories */
    el: $('#categories'),
    initialize: function() {
      _.bindAll(this, 'render');
      this.render();
    },
    render: function() {
      var ul_list = "";
      _(this.collection.models).each(function(category) {
        ul_list += '<li><a href="/category/' + category.get('id') + '"><h1>' + category.get('en') + '</h1><p>' + category.get('es') + '</p></a></li>';
      });
      $(this.el).append(ul_list);
    }
  });

  /****************************/
  /********* ROUTER ***********/
  /****************************/

  var AppRouter = Backbone.Router.extend({
    routes: {
      "/type/:src":          "showType",
      "/foo":                "foo"
    },

    locate_data: {
      "books":          data_books,
      "conversations":  data_conversations,
      "phrases": data_phrases
    },

    initialize: function() {
      _.bindAll(this, 'showType');
    },

    foo: function() {
      alert("foo")
    },

    showType: function(src) {
      console.log(src);
      var types = new Type(this.locate_data[src]);
      new TypeView({ collection: types });
    }
  });

  /****************************/
  /********** INIT ************/
  /****************************/

  var foo = new AppRouter();
  Backbone.history.start({pushState: true, root: "/~plebrun/"});

Answer 1

您不需要路线开头的第一个斜线。路线应该是

routes: {
  "type/:src":          "showType",
  "foo":                "foo"
}

Answer 2

什么不起作用？该应用是否初始化？单击链接时URL是否会更改？

使用pushState时需要注意的一件事是，当您单击工作链接时，将从服务器请求该页面。换句话说，您需要劫持链接，以便骨干网的路由器处理它们而不是调用服务器。为此，您可以使用如下函数：

MyApp.Support = {
  // navigate to CRUD actions when the links are clicked
  navigateLink: function (e) {
    var target = $(e.currentTarget);

    if( ! target.attr('data-method')){ // don't change delete links
      e.preventDefault();
      AppRouter.navigate(target.attr('href'), { trigger: true });
    }
  }
}

然后，您可以在视图中看到类似的内容：

events: {
  'click a[data-method!="destroy"]': "navigateLink"
}

换句话说，当您点击链接时，Backbone的路由器将导航到它，而不是从服务器获取页面。

Answer 3

转出路由不是问题......我忽略了将代码包装在$（'document'）.ready（）中。我认为我不需要，因为js文件的脚本标记引用包含在网页的底部。

使骨干路由正常工作

3 个答案: