Question

好的，我有

{{#each mainmenu}}
<li>
    <a href="#pages/{{this.url}}"><h2>{{this.name}}</h2></a>
</li>
{{/each}}

并在我的路由器中

routes: {
    '': 'index',
    'pages/firstpage' : 'firstpage',
    'pages/secondpage' : 'secondpage',
    'pages/thirdpage' : 'thirdpage'
},
initialize: function () {
   Backbone.history.start({pushState: false});
}

我的json文件是：

{
    "name":"First page",
    "id":"1",
    "url":"firstpage"
},
{
    "name":"Second page",
    "id":"2",
    "url":"secondpage"
},
{
    "name":"Third page",
    "id":"3",
    "url":"thirdpage"
}

现在的方式我的网址是“＃pages / secondpage” - 我如何获得显示“pages / secondpage”的URL - 我试过“pushState：true”哪个没有用...然后在我的主菜单中.js视图我添加了一个事件：

events: {
     'click a.second': 'secondpage'
},

secondpage: function() {
    var secondpageRouter = new Backbone.Router();
    var route = 'pages/secondpage';
    secondpageRouter.navigate(route, {trigger: true});
  }

但是这也没有用...当我从上面的锚中删除“＃pages /”时，我几乎得到了我想要的“页面/第二页”的网址 - 但是在点击后它显示“无法找到网址”链接。那么这里发生了什么？

请帮助任何人？

Answer 1

了解您需要能够在必要时从服务器提供这些网址，请阅读以下文档：http://backbonejs.org/#History

然后你需要做至少三件事。

首先，在定义了路由器之后，调用Backbone.history并确保pushState为true：

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

其次，摆脱链接中的所有#，如下所示：

<a href="pages/{{this.url}}"><h2>{{this.name}}</h2></a>

第三，这很重要，您需要拦截本地链接上的所有点击并阻止其默认行为，即将您转到新页面。使用jQuery很容易：

$(document).on("click", "a[href^='/']", function(event){
  event.preventDefault();
  RouterNameGoesHere.navigate($(event.target).attr("href"), {trigger: true});
});

如果您不使用jQuery，请在视图中收听链接点击事件，处理事件处理程序中的url。我修改了您的代码以添加event参数和event.preventDefault()：

events: {
  'click a.second': 'secondpage'
},

secondpage: function(event) {
  event.preventDefault();
  var secondpageRouter = new Backbone.Router();
  var route = 'pages/secondpage';
  secondpageRouter.navigate(route, {trigger: true});
}

Here is an interesting blog post about this issue

Backbone JS - 路由器问题 - 如何获得干净的URL

1 个答案: