主干路由问题

Backbone routing problems

本文关键字:问题 路由      更新时间:2023-09-26

我刚开始使用主干网,在路由部分遇到了一些问题。这是我的简单页面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>
  1. 加载页面时,您将看到about视图,然后导航到"案例"并返回到"about"视图,然后about视图不会再次显示。。。?

  2. 当我复制链接http://superduper.dk/cases并将其粘贴到浏览器中时,我会得到一个"找不到页面"。为什么它不显示页面。。。当我从根url导航到它时,它能工作吗?

  3. 当我单击页面上的联系人链接时,它会导航到http://www.contact.dk,但当我使用浏览器后退按钮时,它将转到http://superduper.dk/http://www.contact.dk,如果我再次单击浏览器后退按钮,它会显示"找不到页面"。。?

骨干路由器(以及大多数SPA框架的导航机制)基于哈希片段工作,观察hashchange event。(除非你使用历史API,我认为你不是)

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

您应该将超链接更新到(当然,除非您使用的是历史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>