Backbone.js和pushState

如果我在骨干路由器中启用pushState，是否需要在所有链路上使用return false，或者主干是否自动处理？ 是否有任何样本，无论是HTML部分和脚本部分。

Answer 1

这是Tim Branyen在他的样板中使用的模式：

initializeRouter: function () { Backbone.history.start({ pushState: true }); $(document).on('click', 'a:not([data-bypass])', function (evt) { var href = $(this).attr('href'); var protocol = this.protocol + '//'; if (href.slice(protocol.length) !== protocol) { evt.preventDefault(); app.router.navigate(href, true); } }); } 

使用它，而不是单独做preventDefault的链接，你让路由器默认处理它们，并通过具有data-bypass属性来做例外。 根据我的经验，它可以很好地作为一种模式。 我不知道周围有什么好的例子，但是自己尝试一下不应该太难。 骨干的美丽在于它的简单性;）

Answer 2

  $(document.body).on('click', 'a', function(e){ e.preventDefault(); Backbone.history.navigate(e.currentTarget.pathname, {trigger: true}); }); 

Answer 3

match()或startsWith() （ES 6）也可用于检查协议。 如果您想通过pathname属性支持绝对pathname ，请通过location.origin检查基础pathname 。

 function(evt) { var target = evt.currentTarget; var href = target.getAttribute('href'); if (!href.match(/^https?:\/\//)) { Backbone.history.navigate(href, true); evt.preventDefault(); } // or var protocol = target.protocol; if (!href.startsWith(protocol)) { // ... } // or // http://stackoverflow.com/a/25495161/531320 if (!window.location.origin) { window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: ''); } var absolute_url = target.href; var base_url = location.origin; var pathname = target.pathname; if (absolute_url.startsWith(base_url)) { Backbone.history.navigate(pathname, true); evt.preventDefault(); } } 

Answer 4

您可以防止在html中点击<a>标签的默认行为。 只需在<script />标签内添加下面的代码。

 <script> $(document).on("click", "a", function(e) { e.preventDefault(); var href = $(e.currentTarget).attr('href'); router.navigate(href, true);router }); </script>