骨干JS多级导航例子 [英] Backbone JS multiple level navigation example
问题描述
我试图构建一个坚实的骨干JS的实验，在那里我有一个包含我的网页（一个项目，我做了这样的要求，无论如何）本地JSON数据文件。而且我已经codeD这个例子，所以我可以在页面数据无尽的嵌套子页面。这似乎是伟大的工作。但是，当涉及到的URL，我有点卡住了。
I'm trying to construct a solid Backbone JS experiment, where I have a local JSON data file which contains my pages (a project I'm doing has this sort of requirement anyhow). And I've coded this example so I can have endless nested subpages in the pages data. It seems to be working great. But when it comes to the URLs, I'm a little stuck.
怎样运用给这个多级导航例如完全动态网址？我的意思是，正确使用这些模型和集合的url属性，构建所有顶级和嵌套元素正确的URL。它甚至有可能？我只是想不出如何做到这一点。
How do I approach giving this multiple level navigation example totally dynamic URLs? What I mean is, correctly using the url property of the models and collections to construct the right URLs for all the top level and nested elements. Is it even possible? I just can't think how to do it.
见我现在在这里现场演示：
http://littlejim.co.uk/$c$ C /骨干网/多级导航试验/
See a live demo of where I am now: http://littlejim.co.uk/code/backbone/multiple-level-navigation-experiment/
只是所以它更容易，来源$ C $ c是低于...
Just so it's easier, the source code is below...
index.html的
index.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>
content.json
content.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"
}
]
}
的application.js
application.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哈希必须反映的水平。
I'm just needing so right direction on how to do the URLs properly. The idea I'm wanting is that I can setup my controller for routes so it can expect any page of any nested level. The models, collections and nested collections should be able to generate their URLs on their own, but the hash URL must reflect the level.
在理想情况下，这个导航会去喜欢这些URL：
Ideally, this navigation would go to URLs like these:
- http://example.com/#pages/services
- http://example.com/#pages/services/details
- http://example.com/#pages/services/details/this
- http://example.com/#pages/services
- http://example.com/#pages/services/details
- http://example.com/#pages/services/details/this
...使用从content.json数据的鼻涕虫的URL。是否有这样有意义吗？我是pretty新骨干JS只想做正确的事情。
谢谢，詹姆斯
...the URLs using the "slug" from the content.json data. Does any of this make sense? I'm pretty new to Backbone JS and just want to do things right. Thanks, James
推荐答案
下面是我最喜欢的解决这个问题：使用 PathJS 的！
Here's my favorite solution to this problem: use PathJS !
这篇关于骨干JS多级导航例子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
