3

私は単純なルーターを持っています:

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セクション内のリンクの 1 つをクリックすると、すべて正常に動作しますが、そのページを更新すると、ページが壊れるエラーが発生します。

コンソールから:

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、誰かがページに来たときにそれを機能させることができるはずだと考えているのは正しいですか。私は何かを逃しましたか？何か変な実装？正しい方向への微調整は大歓迎です。

ありがとう。

4

3 に答える 3

8

サーバー側に問題があります。あなたはおそらく解決策の半分まで来ているでしょう。

優先されるアセット (js、css) を除いて、すべてのヒットでアプリの HTML を送信するようにサーバーを正しく構成したようです。

問題は、JS ファイルが相対パスで参照されるメインの HTML にあります。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 を配信するサーバー キャッチオールにヒットします (したがって、チョークオン<）。

私の説明は明確ではないかもしれません。

于 2013-10-10T00:15:30.303 に答える
1

問題はhref、テンプレートで使用しているにあります。バックボーン ルーターは、シンボルhashの後のコンテンツであるサイト URL の部分への変更を監視しています。#

だからあなたのhrefは次のようになるはずです：（「プロジェクト」<a href="/#project/<%= id %>">の前に注意してください）#

その方法では、クリック ハンドラーさえまったく必要ありません。Router は自動的にハッシュ変更イベントをキャプチャし、それに応じてルーティングします。

于 2013-10-01T19:57:21.427 に答える