我正在尝试构建一个可靠的 Backbone JS 实验，其中我有一个包含我的页面的本地 JSON 数据文件（我正在做的一个项目无论如何都有这种要求）。我已经编写了这个示例，以便我可以在页面数据中拥有无限的嵌套子页面。看起来效果很好。但当涉及到 URL 时，我有点卡住了。
如何为这个多级导航示例提供完全动态的 URL？我的意思是，正确使用模型和集合的 url 属性为所有顶级元素和嵌套元素构建正确的 URL。有可能吗？我只是想不出该怎么做。
查看我现在所在位置的现场演示：http://littlejim.co.uk/code/backbone/multiple-level-navigation-experiment/ http://littlejim.co.uk/code/backbone/multiple-level-navigation-experiment/
为了更简单，源代码如下......
索引.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Multiple Level Navigation Experiment</title>
<script type="text/javascript" src="../../media/scripts/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../../media/scripts/underscore-min.js"></script>
<script type="text/javascript" src="../../media/scripts/backbone-min.js"></script>
<script type="text/javascript" src="application.js"></script>
<script type="text/javascript">
// wait for the DOM to load
$(document).ready(function() {
App.initialize();
});
</script>
</head>
<body>
<div id="header">
<h1>Multiple Level Navigation Experiment</h1>
<p>Want to get this page structure pulled from JSON locally and have a fully functional multiple level nested navigation with correct anchors.</p>
</div>
<div id="article">
<!-- dynamic content here -->
</div>
</body>
</html>
内容.json
{
"pages": [
{
"id": 1,
"title": "Home",
"slug": "home"
},
{
"id": 2,
"title": "Services",
"slug": "services",
"subpages": [
{
"id": 1,
"title": "Details",
"slug": "details",
"subpages": [
{
"id": 1,
"title": "This",
"slug": "this"
},
{
"id": 2,
"title": "That",
"slug": "that"
}
]
},
{
"id": 2,
"title": "Honest Service",
"slug": "honest-service"
},
{
"id": 3,
"title": "What We Do",
"slug": "what-we-do"
}
]
},
{
"id": 3,
"title": "Contact Us",
"slug": "contact-us"
}
]
}
应用程序.js
// global app class
window.App = {
Data: {},
Controller: {},
Model: {},
Collection: {},
View: {},
initialize : function () {
$.ajax({
url: "data/content.json",
dataType: "json",
success: function(json) {
App.Data.Pages = json.pages;
new App.Controller.Main();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log(errorThrown);
}
});
}
}
// main controller class
// when called it should have 'data' in JSON format passed to it
App.Controller.Main = Backbone.Controller.extend({
initialize: function() {
var pagesCollection = new App.Collection.Pages(App.Data.Pages);
var pagesView = new App.View.Pages({collection: pagesCollection});
$('#article').html(pagesView.render().el);
}
});
// pages model class
App.Model.Page = Backbone.Model.extend({
initialize: function() {
if (!_.isUndefined(this.get("subpages"))) {
this.subpages = new App.Collection.Pages(this.get("subpages"));
} // end if
this.view = new App.View.Page({model: this});
},
});
// page collection class
App.Collection.Pages = Backbone.Collection.extend({
model: App.Model.Page
});
// single page view class
App.View.Page = Backbone.View.extend({
tagName: "li",
initialize: function() {
_.bindAll(this, "render");
},
render: function() {
$(this.el).html(_.template("<%=title%>", {title: this.model.get("title")}));
return this;
}
});
// multiple pages view class
App.View.Pages = Backbone.View.extend({
tagName: "ul",
initialize: function() {
_.bindAll(this, "render");
},
render: function() {
var that = this;
this.collection.each(function(page) {
$(that.el).append(page.view.render().el);
if (!_.isUndefined(page.subpages)) {
var subpagesView = new App.View.Pages({collection: page.subpages});
$(that.el).append(subpagesView.render().el);
} // end if
});
return that;
}
});
我只是需要关于如何正确处理 URL 的正确指导。我想要的想法是我可以为路由设置控制器，以便它可以期望任何嵌套级别的任何页面。模型、集合和嵌套集合应该能够自行生成 URL，但哈希 URL 必须反映级别。
理想情况下，此导航将转到如下 URL：
- http://example.com/#pages/services http://example.com/#pages/services
- http://example.com/#pages/services/details http://example.com/#pages/services/details
- http://example.com/#pages/services/details/this http://example.com/#pages/services/details/this
...使用 content.json 数据中的“slug”的 URL。这些有道理吗？我对 Backbone JS 还很陌生，只想把事情做好。
谢谢，詹姆斯
