Backbone JS 多级导航示例 [英] Backbone JS multiple level navigation example

查看：24
本文介绍了Backbone JS 多级导航示例的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试构建一个可靠的 Backbone JS 实验，其中我有一个包含我的页面的本地 JSON 数据文件(我正在做的一个项目无论如何都有这种要求).我对这个例子进行了编码，所以我可以在页面数据中拥有无穷无尽的嵌套子页面.它似乎工作得很好.但是说到网址，我有点卡住了.

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

查看我现在所处位置的现场演示:http://littlejim.co.uk/code/backbone/multiple-水平导航实验/

为了更简单，源代码在下面...

index.html

<html lang="zh-cn"><头><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>多级导航实验</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">//等待 DOM 加载$(document).ready(function() {应用初始化()；});<身体><div id="标题"><h1>多级导航实验</h1><p>想要从本地 JSON 中获取此页面结构，并拥有一个功能齐全的多层嵌套导航和正确的锚点.</p>

<div id="文章"><!-- 动态内容在这里-->

content.json

<代码>{页面":[{身份证":1，"title": "家",蛞蝓":家"},{身份证":2，"title": "服务","slug": "服务",子页面":[{身份证":1，"title": "详细信息","slug": "细节",子页面":[{身份证":1，"title": "这个",蛞蝓":这个"},{身份证":2，"title": "那个",蛞蝓":那个"}]},{身份证":2，"title": "诚信服务","slug": "诚实服务"},{身份证":3，"title": "我们做什么","slug": "我们做什么"}]},{身份证":3，"title": "联系我们","slug": "联系我们"}]}

应用程序.js

//全局应用类窗口.App = {数据: {}，控制器: {}，模型: {}，收藏: {}，看法: {}，初始化:函数(){$.ajax({网址:数据/内容.json"，数据类型:json"，成功:函数(json){App.Data.Pages = json.pages;新的 App.Controller.Main();},错误:函数(XMLHttpRequest，textStatus，errorThrown){控制台日志(错误抛出)；}});}}//主控制器类//当被调用时，它应该将 JSON 格式的数据"传递给它App.Controller.Main = Backbone.Controller.extend({初始化:函数(){var pagesCollection = new App.Collection.Pages(App.Data.Pages);var pagesView = new App.View.Pages({collection: pagesCollection});$('#article').html(pagesView.render().el);}});//页面模型类App.Model.Page = Backbone.Model.extend({初始化:函数(){if (!_.isUndefined(this.get("subpages"))) {this.subpages = new App.Collection.Pages(this.get("subpages"));}//万一this.view = new App.View.Page({model: this});},});//页面集合类App.Collection.Pages = Backbone.Collection.extend({模型:App.Model.Page});//单页视图类App.View.Page = Backbone.View.extend({tagName: "li",初始化:函数(){_.bindAll(this, "render");},渲染:函数(){$(this.el).html(_.template("<%=title%>", {title: this.model.get("title")}));返回这个；}});//多页视图类App.View.Pages = Backbone.View.extend({标签名称: "ul",初始化:函数(){_.bindAll(this, "render");},渲染:函数(){var that = this;this.collection.each(函数(页面){$(that.el).append(page.view.render().el);如果 (!_.isUndefined(page.subpages)) {var subpagesView = new App.View.Pages({collection: page.subpages});$(that.el).append(subpagesView.render().el);}//万一});返回那个；}});

我只是需要关于如何正确处理 URL 的正确方向.我想要的想法是我可以为路由设置我的控制器，这样它就可以期待任何嵌套级别的任何页面.模型、集合和嵌套集合应该能够自己生成它们的 URL，但哈希 URL 必须反映级别.

理想情况下，此导航会转到以下网址:

...使用 content.json 数据中的slug"的 URL.这是否有意义?我对 Backbone JS 很陌生，只想把事情做好.谢谢，詹姆斯

解决方案

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

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

解决方案

Here's my favorite solution to this problem: use PathJS !

这篇关于Backbone JS 多级导航示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆