0

特定のユーザーのuser_idであるページhttp://www.domain.com/user/123があります。123タブ付きのインターフェイスがあり、タブをクリックすると、アドレスバーが新しいURLで更新されます。

例：をクリックすると<a href="likes" data-toggle="tab">Likes</a>、アドレスバーが次のように更新されます。http://www.domain.com/user/123/likes

問題： backbone.jsにプッシュステートを実装しようとしていますが、を使用するとURLを正しく取得できないようですapp.navigate()。ルートをとしてroot使用して、ルーターに属性を設定してみました。user_idを末尾に追加するにはどうすればよいですか？すなわち。Backbone.history.start({ pushState: true, root: "/user/" });http://www.domain.com/user/roothttp://www.domain.com/user/123/

//Router
var AppRouter = Backbone.Router.extend({

    routes: {
        '': 'likes',
        'likes': 'likes',
    },

    likes: function() {
        console.log('fn likes');
        $('#tab_likes"').show();
    }
});

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

$(function() {
    // Update address bar URL
    $('a[data-toggle="tab"]').on('click', function(e) {
        app.navigate(e.target.getAttribute('href'));
    });

});

更新されたコード

URLからを取得した後にのroot属性を更新するにはどうすればよいですか？以下に示す現在の方法は機能しませんBackbone.historyuser_id

// Router

var AppRouter = Backbone.Router.extend({

    routes: {
        ':user_id/likes': 'likes',
        ':user_id/': 'likes'
    },

    set_user_id: function($user_id) {
        this.user_id = $user_id;
        // ADD SOME CODE TO CHANGE Backbone.history's root attribute
    },

    likes: function($user_id) {
        console.log('fn likes');
        this.set_user_id($user_id);
        $('#tab_likes"').show();
    }
});

var app = new AppRouter();
Backbone.history.start({ 
    pushState: true, 
    root: '/user/' + app.user_id + '/'  // app.user_id is undefined at the time this is called
});
4

2 に答える 2

1

変数のユーザーIDを取得するには、パラメーターを使用してルートを作成する必要があります。

var AppRouter = Backbone.Router.extend({

    routes: {
        ':user/likes': 'likes',
    },

    likes: function(user) {
        console.log(user, 'fn likes');
        $('#tab_likes"').show();
    }
});

詳細については、バックボーンドキュメントを参照してください。言うまでもなく、hrefそれに応じて変更する必要がありますhref="123/likes"。

最後に、URLを履歴に保存するだけでなく、ルートをトリガーするために、次のようにナビゲートする必要があります。

app.navigate(e.target.getAttribute('href'), true);
于 2012-07-31T14:23:44.143 に答える
0

navigatetrigger（URLを更新するだけでなく）実際にルートハンドラーを起動する場合は、オプションを設定する必要があります。ドキュメントから：

アプリケーションでURLとして保存したいポイントに到達したら、navigateを呼び出してURLを更新します。ルート関数も呼び出す場合は、トリガーオプションをtrueに設定します。

したがって、console.logデバッグを少なくとも機能させるには、次のことを試してください。

app.navigate(e.target.getAttribute('href'), true);
于 2012-07-31T13:58:31.983 に答える