0

我的 BackboneJS 应用程序有一个详细视图，例如一本书，它由诸如editorial/book/edit/4之类的 url 表示。Book 视图由几个标签组成，基于 TwitterBoostrap 标记，例如标签 General/Special/Admin for a Book。

如果我按照他们的文档中的规定使用 Boostrap 选项卡，例如

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

然后一旦点击标签，地址栏中的 URL 就会失效，而不是 siteurl/editorial/book/edit/4#special，导航栏会显示 siteurl#special。

Q1：使用 Backbone/Boostrap 构建具有有效 url 的选项卡的最佳方法是什么？The next step I aim at is to make this view reloadable, eg so that when a tab is selected and user hits "Reload" in browser, at least same view is loaded, ideally - with latest tab selected.

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

4

1 回答 1

0

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

回答问题 1

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

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

（此示例具有硬编码的 URL 路径，只需使用document.URL或其他满足您需求的功能即可）

回答问题 2

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

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
});
于 2013-04-09T16:29:44.803 回答