Question

我的BackboneJS应用程序有一个详细视图，比如一本书，用url表示，如 editorial / book / edit / 4 。 Book视图由几个选项卡组成，基于TwitterBoostrap标记，例如，选项卡一般/特殊/管理员。

如果我按照文档中的规定使用Boostrap标签，例如

<li><a data-toggle="tab" href="#special">Special</a></li>

然后一旦点击标签，地址栏中的URL变为无效，而不是siteurl / editorial / book / edit / 4＃special它导航栏显示siteurl＃special。

Q1：使用Backbone / Boostrap构建带有效网址的标签的最佳方法是什么？我的目标是下一步是使这个视图可重新加载，例如这样，当选择一个标签并且用户点击时，重新加载＆＃34;在浏览器中，理想情况下至少加载相同的视图 - 选择最新的选项卡。

Q2：理想的方法是什么 - 为所有细节屏幕构建一个路由器功能及其选项卡，或者每个选项卡分成几个路由器功能？

Answer 1

我的建议是通过JS方面处理导航。

回答问题1

当用户点击选项卡时，在处理程序上使用骨干导航功能：

app.navigate("siteurl/editorial/book/edit/4" + '#' + tabId, {trigger: true});

（此examaple的网址路径是硬编码的，只需使用document.URL或其他满足您需求的功能抓住它

回答问题2

这取决于您需要实现的逻辑以及该逻辑是否很重。在您的问题中，您说每个选项卡都有不同的视图，我建议将逻辑拆分为一个路由器函数，因为它们都应用于同一路径（例如siteurl / editorial / book / edit / 4），它们只是片段网址不同。

routes: {
  "siteurl/editorial/book/edit/4#:tabId":         "tab",
}
router.on("siteurl/editorial/book/edit/4#:tabId", function(tabId) {
  //Split your logic based on the tabId
});

带有Backbone的详细屏幕上的Bootstrap选项卡URL

1 个答案: