javascript – 刷新页面时,带有pushState的Backbone路由不起作用

我有一个简单的路由器：

Erin.Router = Backbone.Router.extend({
    initialize: function() {
        Backbone.history.start({pushState: true});
    },
    routes: {
        '' : 'index',
        'project/:img' :'project',
    },
    index: function() {
        var galleryView = new Erin.GalleryView();
    },
    project: function(img) {
        console.log(img);
    }
}); 

Erin.GalleryView的模板是(认为可能存在问题)：

<script type="text/template" id="gallery-grid">
        <a href="/project/<%= id %>">
            <img src="<%= thumbnail %>" />
            <span class="desc">
                <div class="desc-wrap">
                    <p class="title"><%= title %></p>
                    <p class="client"><%= client %></p>
                </div>
            </span>
        </a>
    </script>

GalleryView和GalleryItem代码.

Erin.GalleryItem = Backbone.View.extend({
    tagName: 'div',
    className: 'project-container',
    //Grab the template html
    template: _.template($('#gallery-grid').html()),
    //Set up the render function
    render: function() {
        //What is the $el in this case?
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

Erin.GalleryView = Backbone.View.extend({
    el: '#projects',
    initialize: function() {
        //create new collection
        this.col = new Erin.Gallery();
        //Listen to all events on collection
        //Call Render on it
        this.listenTo(this.col,'all',this.render);
        //Fetch data
        this.col.fetch();
    },
    render: function() {
        //Get reference to the view object
        var that = this;
        //Empty div
        this.$el.empty();
        //For each model in the collection
        _.each(this.col.models, function(model){
            //call the renderItem method
            that.renderItem(model);
        },this);
    },
    renderItem: function(model) {
        //create a new single item view
        var itemView = new Erin.GalleryItem({
            model:model
        });
        //Append items to to element, in this case "#projects"
        this.$el.append(itemView.render().el);  
    }
});

然后我准备好了一份文件

$(function() {
    var router = new Erin.Router();
    $('#projects').on('click', 'a[href ^="/"]', function(e){
        e.preventDefault();
        router.navigate($(this).attr('href'),{trigger: true});
    });
});

当您加载页面并单击#project部分中的一个链接时,一切都按预期运行,但是如果刷新该页面,则会出现打破页面的错误.

从控制台：

Uncaught SyntaxError: Unexpected token < js/jquery.js:1
Uncaught SyntaxError: Unexpected token < js/underscore-min.js:1
Uncaught SyntaxError: Unexpected token < js/backbone.js:1
Uncaught SyntaxError: Unexpected token < erin.js:1

它还说明了以下内容：

Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:8888/project/js/backbone.js". 

对于文档头部中的所有链接和脚本.

所有这些似乎都指向index.html文件的第一行.因此,如果我单击一个链接,它将从我的数据中控制我正在寻找的img id,如果我刷新页面或输入该链接,我会得到上面的错误.我是否正确地认为我应该能够保存链接domain.com/project/coolthing并在有人访问该页面时使用该工具.我错过了什么吗？实施了一些奇怪的东西？向正确的方向轻推将非常感激.

谢谢.

解决方法:

你有服务器端的问题.你可能已经完成了解决方案的一半.

看起来您已正确配置服务器以在任何匹配上发送应用HTML,但具有优先权的资产(js,css)除外.

问题在于主HTML,其中JS文件使用相对路径引用.当pushState将URL更新为/ project / 1后重新加载时,基本URL将变为/ project /.

即.你有

<script src="js/backbone.js"></script>

什么时候你应该

<script src="/js/backbone.js"></script>

因此,当浏览器尝试加载backbone.js时,它找不到它(/project/js/backbone.js不存在),并点击提供应用程序HTML的服务器catchall(因此解析错误,扼杀<). 我的解释可能不是很清楚,这里已经很晚了,但我相信你会明白的！

标签：javascript,backbone-js,backbone-routing
来源： https://codeday.me/bug/20190718/1492199.html