骨干路由问题答案

【问题标题】：Backbone routing problems骨干路由问题
【发布时间】：2016-03-31 14:34:43
【问题描述】：

我开始使用骨干网，但在路由部分遇到了一些问题。这是我的简单页面http://superduper.dk/

    // ABOUT MODEL

    var AboutModel = Backbone.Model.extend({
        urlRoot:'http://jsonplaceholder.typicode.com/posts',
    });

    var aboutModel = new AboutModel({

    });

    // ABOUT VIEW

    var AboutView = Backbone.View.extend({

        template: _.template('<h1><%= title %></h1> <p><%= body %></p>'),

        initialize: function() {
            this.listenTo(this.model, 'change', this.render);
        },

        render:function(){
            var attributes = this.model.toJSON();
            this.$el.html(this.template(attributes));
        }
    });

    // CASES MODEL

    var CasesModel = Backbone.Model.extend({
        urlRoot:'http://jsonplaceholder.typicode.com/posts',
    });

    var casesModel = new CasesModel({

    });

    // CASES VIEW

    var CasesView = Backbone.View.extend({

        template: _.template('<h1><%= title %></h1> <p><%= body %></p>'),

        initialize: function() {
            this.listenTo(this.model, 'change', this.render);
        },

        render:function(){
            var attributes = this.model.toJSON();
            this.$el.html(this.template(attributes));
        }
    });

    // ROUTER

    var Routes = new (Backbone.Router.extend({
        routes:{
            '' : 'index',
            'cases' : 'cases'
        },

        index:function(){
            console.log('about');
            var aboutView = new AboutView({model:aboutModel, el:'#view'});
            aboutModel.fetch(); 
        },

        cases:function(){
            console.log('cases');
            var casesView = new CasesView({model:casesModel, el:'#view'});
            casesModel.fetch();
        },

        start:function(){
            Backbone.history.start({pushState: true})
        }
    }));


    $(document).ready(function(){
        Routes.start();
    })

    $(document).on("click", "a", function(e)
    {

        var href = $(e.currentTarget).attr('href');

        var res = Backbone.history.navigate(href,true);
        //if we have an internal route don't call the server
        if(res)
            e.preventDefault();

    });

        <ul>
            <li><a href="/">About</a></li>    
            <li><a href="/cases">Cases</a></li>    
            <li><a href="http://www.contact.dk">Contact</a></li>    
        </ul>

        <div id="view"></div>

当页面加载时，您会看到 about 视图，然后导航到“案例”并返回到“About”视图 - 然后 about 视图不再显示...？
当我复制链接http://superduper.dk/cases 并将其粘贴到浏览器中时，我得到一个“找不到页面”。为什么它不显示页面...当我从根 url 导航到它时它可以工作？
当我点击页面上的联系人链接时，它会导航到 http://www.contact.dk，但是当我使用浏览器的后退按钮时，它会转到 http://superduper.dk/http://www.contact.dk，如果我再点击一次浏览器的后退按钮，它显示“找不到页面”..？

【问题讨论】：

标签： javascript backbone.js routing

【解决方案1】：

骨干路由器（以及大多数 SPA 框架的导航机制）基于散列片段工作，观察 hashchange event。（除非你使用 History API，我认为你没有）

如果我输入http://superduper.dk/#cases，则视图已正确初始化。

您应该将超链接更新为（当然，除非您使用 History API）

<ul>
    <li><a href="#">About</a></li>    
    <li><a href="#cases">Cases</a></li>    
    <li><a href="http://www.contact.dk">Contact</a></li>    
</ul>

【讨论】：