Javascript 主干JS多级导航示例_Javascript_Url_Controller_Backbone.js_Underscore.js

Javascript 主干JS多级导航示例

javascript url backbone.js

Javascript 主干JS多级导航示例,javascript,url,controller,backbone.js,underscore.js,Javascript,Url,Controller,Backbone.js,Underscore.js,我正在尝试构建一个坚实的主干JS实验，其中我有一个本地JSON数据文件，其中包含我的页面我正在做的一个项目无论如何都有这样的需求。我编写了这个示例，这样我就可以在页面数据中有无限嵌套的子页面。看起来效果不错。但是说到URL，我有点被卡住了我如何给出这个多级导航示例的完全动态URL？我的意思是，正确地使用模型和集合的url属性为所有顶级和嵌套元素构造正确的url。有可能吗？我就是想不出怎么做查看我现在所在位置的现场演示：为了方便起见，源代码如下 index.html <!DOCTYP

我正在尝试构建一个坚实的主干JS实验，其中我有一个本地JSON数据文件，其中包含我的页面我正在做的一个项目无论如何都有这样的需求。我编写了这个示例，这样我就可以在页面数据中有无限嵌套的子页面。看起来效果不错。但是说到URL，我有点被卡住了

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

查看我现在所在位置的现场演示：

为了方便起见，源代码如下

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>

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：

…使用content.json数据中的slug的URL。这些有意义吗？我对主干JS很陌生，只想把事情做好。

谢谢，詹姆斯，为什么不干脆把鼻涕虫解析出来呢

因此，主干网中可以有一条路由。控制器如下所示：

'pages/:id' : showPage

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

然后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' : showPage
'pages/:id/:nest' : showNestedPage
'pages/:id/:nest/:more' : showNestedMorePage

下面是我最喜欢的解决方案：使用

这是一个可能的解决方案，并且肯定让我思考。我还在想是否有一种更灵活的方法。。。我要试试你说的话。我想我只是想涵盖一些情况，理论上我可以在这里用嵌套的“页面”尽可能深入。以某种方式利用主干模型和集合的“url”属性。James，请告诉我们您使用这些路由的成功程度。或者你使用了其他解决方案，比如pathjs