3

この例を見ると、ルーターは、そのルートに一致する URL の変更を引き起こすリンクを検出する必要があるように見えます。ただし、Handlebars テンプレートによって生成されたリンクをクリックしても、URL が変更されるだけで、ルーターでアラートはトリガーされません。URL はハッシュを失いますが、何らかの奇妙な理由で、更新時にルートがトリガーされます。

ルーターが URL の変更を認識しない理由がわかりません。リンクが機能する場合は、Router.navigate ではなくリンクを使用することをお勧めします。ルートはデフォルト ルートに対して機能します。

以下の backbone.js コードは、html ヘッドのスクリプトから $(document).ready で実行されます。

アイテム ハンドルバー テンプレート

{{#with lobby}}
<li id="lobby-{{id}}">
    <div class="lobby_info">{{name}} - {{owner}} - {{player_count}}/18</div> <a href="#lobby/{{id}}">Join</a>
 </li>
 {{/with}}

アイテム バックボーン ビュー

var LobbyView = Backbone.View.extend({
    events: {
        "click .lobby_info": "expand_toggle",
    },

    expand_toggle: function(evt) {
        alert('Expand toggle');
    },

    render: function() {
        var template = Handlebars.compile($("#lobby_template").html());

        this.$el.html(template(this.model.toJSON()));

        return this;
    }
});

アイテム コレクション ビュー

var LobbiesView = Backbone.View.extend({
    events: {
        "submit #create_lobby_form": "create_lobby",
    },

    create_lobby: function(evt) {
        evt.preventDefault()

        var val = $('#lobby_name').val();

        socket.emit('create', val);

        $("#lobby_name").val("");
    },

    initialize: function() {
        var me = this;

        socket.on('create', function(lobby) {
            var lobby_item = new LobbyView({
                model: new LobbyModel({
                    lobby: lobby
                })
            });

            // render it to the DOM
            el = lobby_item.render().el;
            me.$("#lobbies").append(el);
       });

    },

    render: function() {
        var me = this;

        var template = Handlebars.compile($("#lobbies_template").html());

        $(this.el).html(template());

        return this;
    },
});

ルーター

var Router = Backbone.Router.extend({
    // Match urls with methods
    routes: {
        "": "index",
        "lobby/:lobby_id": "lobby",
        "player/:player_id": "player"
    },

    index: function() {
        // connect to the websocket
        socket = io.connect();
        socket.emit('subscribe');
        var view = new LobbiesView({
            el: $("#container"),
        });

        view.render();
    },

    // View a lobby
    lobby: function(lobby_id) {
        alert('Viewing lobby' + lobby_id);
    },

    // View a player
    player: function(player_id) {
    },
});

// start backbone routing
var app = new Router();
Backbone.history.start({ pushState: true });
4

1 に答える 1

2

あなたの問題は{ pushState: true }です。それを削除すると、ルーターが機能します（コンソールでテスト済み）。がtrueに設定されている場合pushState、ハッシュなしでルートを設定する必要があります。

これは私がテストしていたコードです：

var Router = Backbone.Router.extend({
    routes: {
        "": "index",
        "lobby/:lobby_id": "lobby",
        "player/:player_id": "player",
        "*actions": "test"
    },

    test: function() { 
        console.log('test', arguments) 
    },

    index: function() {
        console.log('index', arguments);
    },

    player: function() {
        console.log('player', arguments);
    },

    lobby: function(lobby_id) {
        console.log('lobby', arguments);
    }
});

// start backbone routing
var app = new Router();
Backbone.history.start();
于 2012-10-23T05:48:47.170 に答える