[英]Backbone.js Router not detecting url change
看一下這個例子 ,路由器似乎應檢測到導致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 });
您的問題是{ pushState: true }
。 刪除它,你的路由器將工作(在控制台測試)。 如果pushState
設置為true,則需要設置沒有哈希的路由。
這是我測試的代碼:
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();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.