0

私は backbone.js ルートを使用していますが、履歴を機能させるのに苦労しています。ここに私が持っているコードがあります:

$(function() {  

    var AppRouter = Backbone.Router.extend({
        routes: {
           "/": "initHome",
           "home": "initHome",
           "projects": "initProjects",
           "project/:id" : "initProject"
        }
    });

    // Instantiate the router
    var app_router = new AppRouter;

    app_router.on('route:initProject', function (id) {
        // Note the variable in the route definition being passed in here
          getContent("project",id);
    });

    app_router.on('route:initProjects', function () {
          getContent("projects");
    });

    app_router.on('route:initHome', function () {
          getContent("home");
    });


    // SINGLE PAGE MAGIC
    $(document).on("click",".links",function(e) {
        var href = $(this).attr("href");
        var url =  lang + "/" + href;    
            page = $(this).attr("data-id");
        var param = $(this).attr("data-param");         
        if (typeof(param) == 'undefined') { param = ""; }  

        if(activepage != href && !main.hasClass("loadingPage")){    
            loader.show();  
            firstInit = false;
            activepage = href;
            res = app_router.navigate(url, true);
            getContent(page,param);
        }   
        return false;                           
    });

    Backbone.history.start({pushState: true, root: "/karlin/"});

});

プッシュ状態はクリック時に正常に動作しますが、ブラウザで戻る/次のボタンを試すと getContent() 関数が呼び出されません。バックボーン初心者なので、アドバイスいただけると助かります。

4

2 に答える 2

0

これを変える：res = app_router.navigate(url, true);

これに：app_router.navigate(url, {trigger: true});

変数「res」を作成する理由がわかりません。

私見では、バックボーンの複雑な実装があります。次のように、ルートをコンストラクターに移動することをお勧めします。

var AppRouter = Backbone.Router.extend({
    routes: {
       "/": "initHome",
       "home": "initHome",
       "projects": "initProjects",
       "project/:id" : "initProject"
    },

    initProject: function (id) {
    // Note the variable in the route definition being passed in here
      getContent("project", id);
    },

    initProjects: function () {
      getContent("projects");
    },

    initHome: function () {
      getContent("home");
    }
});

// Instantiate the router
var app_router = new AppRouter;

また、バックボーンのドキュメントのようにルートを適切に設定すると、

routes: {
  "help":                 "help",    // #help
  "search/:query":        "search",  // #search/kiwis
  "search/:query/p:page": "search"   // #search/kiwis/p7
},

従来のリンクを使用してルートにパラメーターを渡すことができます。ページを変更するためのヘルパー関数として if activePage ステートメントをルーターに移動することもできます。

Router.navigate はまれなインスタンス用です。

バックボーンのドキュメントを何度も読むことをお勧めします。毎回新しいことを学びます。そこにはたくさんのことがあり、バックボーンはすでに効率的に物事を行っています. 車輪を再発明する必要はありません。

お役に立てれば！

于 2013-02-01T00:09:42.890 に答える