バックボーンルーティングが正常に動作するようにする

Question

私は様々なチュートリアルやドキュメントを見てきましたが、バックボーンルータを動作させるにはまだ問題があります。私は、OS Xのサイトフォルダ（URLはhttp://localhost/~plebrun）でコードを実行しています。 http://localhost/~plebrun/#fooもhttp://localhost/~plebrun/#type/booksもありません。思考？

（注意：DATA_ *変数はJSONデータを含む）

/****************************/ 
    /********** MODELS **********/ 
    /****************************/ 

    var Category = Backbone.Model.extend(); 
    var Phrase = Backbone.Model.extend(); 

    /****************************/ 
    /******** COLLECTIONS *******/ 
    /****************************/ 

    var Type = Backbone.Collection.extend({ 
    model: Category 
    }); 

    /****************************/ 
    /********** VIEWS ***********/ 
    /****************************/ 

    var TypeView = Backbone.View.extend({ /* a Type is a list of Categories */ 
    el: $('#categories'), 
    initialize: function() { 
     _.bindAll(this, 'render'); 
     this.render(); 
    }, 
    render: function() { 
     var ul_list = ""; 
     _(this.collection.models).each(function(category) { 
     ul_list += '<li><a href="/category/' + category.get('id') + '"><h1>' + category.get('en') + '</h1><p>' + category.get('es') + '</p></a></li>'; 
     }); 
     $(this.el).append(ul_list); 
    } 
    }); 

    /****************************/ 
    /********* ROUTER ***********/ 
    /****************************/ 

    var AppRouter = Backbone.Router.extend({ 
    routes: { 
     "/type/:src":   "showType", 
     "/foo":    "foo" 
    }, 

    locate_data: { 
     "books":   data_books, 
     "conversations": data_conversations, 
     "phrases": data_phrases 
    }, 

    initialize: function() { 
     _.bindAll(this, 'showType'); 
    }, 

    foo: function() { 
     alert("foo") 
    }, 

    showType: function(src) { 
     console.log(src); 
     var types = new Type(this.locate_data[src]); 
     new TypeView({ collection: types }); 
    } 
    }); 

    /****************************/ 
    /********** INIT ************/ 
    /****************************/ 

    var foo = new AppRouter(); 
    Backbone.history.start({pushState: true, root: "/~plebrun/"}); 

Answer 1

ルーティングは問題ではありません...私は$（ 'document'）。ready（）でコードをラップすることを怠っていました。私は、jsファイルへのscripタグの参照がWebページの最下部に含まれていたので、私が必要とは思わなかった。

Answer 2

あなたがルートの先頭に最初のスラッシュは必要ありません。したがってルートは

routes: { 
    "type/:src":   "showType", 
    "foo":    "foo" 
} 

Answer 3

である必要があります。アプリは初期化されますか？リンクをクリックするとURLが変わるのですか？

pushStateを使用する際に注意する必要があることは、動作中のリンクをクリックすると、サーバーからページが要求されることです。言い換えると、バックボーンのルーターがサーバーを呼び出す代わりに、リンクをハイジャックする必要があります。これを実現するために、あなたはこの1つのような機能を使用することができます。

MyApp.Support = { 
    // navigate to CRUD actions when the links are clicked 
    navigateLink: function (e) { 
    var target = $(e.currentTarget); 

    if(! target.attr('data-method')){ // don't change delete links 
     e.preventDefault(); 
     AppRouter.navigate(target.attr('href'), { trigger: true }); 
    } 
    } 
} 

その後、あなたはあなたのビューでこのような何かを持つことができます。つまり

events: { 
    'click a[data-method!="destroy"]': "navigateLink" 
} 

を、あなたがリンクをクリックしたとき、サーバーからページを取得するのではなく、バックボーンのルーターがそのサーバーに移動します。