刷新頁面時，使用pushState的Backbone路由不起作用

Question

我有一個簡單的路由器：

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部分中的一個鏈接時，一切都按#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並在有人訪問該頁面時使用該工具。 我錯過了什么嗎？ 實施了一些奇怪的東西？ 向正確的方向輕推將非常感激。

謝謝。

Answer 1

你有服務器端的問題。 你可能已經完成了解決方案的一半。

看起來您已正確配置服務器以在任何匹配上發送應用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（因此解析錯誤， < ）上的窒息。

我的解釋可能不是很清楚，這里已經很晚了，但我相信你會明白的！

Answer 2

問題出在您在模板中使用的href中。 Backbone Router正在監視站點URL的hash部分的更改，這是#符號后面的內容。

所以你的href應該是： <a href="/#project/<%= id %>"> （注意#之前的”項目“）

以這種方式，您甚至根本不需要點擊處理程序，路由器將自動捕獲哈希更改事件並相應地路由。

Answer 3

thibauts和propncemac 的評估都是正確的。 要么不使用pushState並使用哈希鏈接，要么在服務器中放置重寫規則以發送靜態。

最初當你加載你加載這個網址 -

http://localhost:8888

就像你的靜力學的智慧網址一樣

http://localhost:8888/js/backbone.js

實際問題是當你使用pushState並訪問鏈接時。 您的瀏覽器網址變為。 像這樣的東西 -

http://localhost:8888/project/some_img_id

現在，當您嘗試重新加載頁面時，索引文件將從此URL中獲取 -

http://localhost:8888/project/your_default.file   [index.html]

您的服務器無法找到，默認為索引文件

http://localhost:8888/your_default.file

當瀏覽器嘗試訪問靜態時，它再次默認為索引文件

http://localhost:8888/project/js/backbone.js

那就是為什么錯誤。 因為它在javascript中找到了無效toekn的'<'字符。

Uncaught SyntaxError: Unexpected token < js/jquery.js:1

這個錯誤導致它試圖解析的文件是backbone.js一個javascript但它得到你的index.html

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