Backbone JS 多级导航示例

发布于 2024-10-28 19:27:29 字数 5369 浏览 5 评论 0原文

我正在尝试构建一个可靠的 Backbone JS 实验，其中我有一个包含我的页面的本地 JSON 数据文件（我正在做的一个项目无论如何都有这种要求）。我已经编写了这个示例，以便我可以在页面数据中拥有无限的嵌套子页面。看起来效果很好。但当涉及到 URL 时，我有点卡住了。

如何为这个多级导航示例提供完全动态的 URL？我的意思是，正确使用模型和集合的 url 属性为所有顶级元素和嵌套元素构建正确的 URL。有可能吗？我只是想不出该怎么做。

查看我现在所在位置的现场演示： http://littlejim.co.uk/code/backbone/multiple- level-navigation-experiment/

只是这样更容易，源代码如下...

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

{
"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

// 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：

...使用content.json 数据中的“slug”。这些有道理吗？我对 Backbone JS 还很陌生，只想把事情做好。谢谢，詹姆斯

原文

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.

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.

See a live demo of where I am now:
http://littlejim.co.uk/code/backbone/multiple-level-navigation-experiment/

Just so it's easier, the source code is below...

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

{
"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

// 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;
    }
});

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.

Ideally, this navigation would go to URLs like these:

...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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

卷耳 2024-11-04 19:27:29

这是我最喜欢的解决这个问题的方法：使用 PathJS ！

回复收藏 0 原文

野稚 2024-11-04 19:27:29

为什么不直接解析出 slug 呢？

因此，您可以在 Backbone.Controller 中使用如下所示的单个路由：

'pages/:id' : showPage

然后 showPage 如下所示：

showPage(id) : function(id) {
   parse out the string 'services/details/etc'
   look up the slug data based on that IE pages['services']['details']['etc']
}

或者如果页面实际上需要以不同方式处理，您可以设置多个路由，更精细，如下所示：

'pages/:id' : showPage
'pages/:id/:nest' : showNestedPage
'pages/:id/:nest/:more' : showNestedMorePage

Why not just parse out the slug?

So you can have a single route in the Backbone.Controller that looks like this:

'pages/:id' : showPage

And then showPage looks like:

showPage(id) : function(id) {
   parse out the string 'services/details/etc'
   look up the slug data based on that IE pages['services']['details']['etc']
}

or if the pages actually need to be processed differently, you can setup multiple routes, ever more granular like this:

'pages/:id' : showPage
'pages/:id/:nest' : showNestedPage
'pages/:id/:nest/:more' : showNestedMorePage

回复收藏 0 原文

~没有更多了~

关于作者

何以畏孤独

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

Backbone JS 多级导航示例

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

Backbone JS 多级导航示例

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。