我在 Backbone 中遇到一些非常简单的问题。我想连接<h1>
在我的页面中,以便当用户单击它时,它会无缝返回到主页,而无需回发。
这是 HTML:
<h1><a id="home" href="/">Home</a></h1>
(更新:按照评论者的建议修复了 ID。)这是我的 Backbone View 和路由器:
var HomeView = Backbone.View.extend({
initialize: function() {
console.log('initializing HomeView');
},
events: {
"click a#home": "goHome"
},
goHome: function(e) {
console.log('goHome');
e.preventDefault();
SearchApp.navigate("/");
}
});
var SearchApp = new (Backbone.Router.extend({
routes: {
"": "index",
},
initialize: function(){
console.log('initialize app');
this.HomeView = new HomeView();
},
index: function(){
// do stuff here
},
start: function(){
Backbone.history.start({pushState: true});
}
}));
$(document).ready(function() {
SearchApp.start();
});
控制台正在向我显示
initialize app
initializing HomeView
但是当我点击<h1>
时,页面回发 - 但我没有看到 goHome
在控制台中。
我做错了什么?显然我可以连接 <h1>
click 事件在 jQuery 中足够简单,但我想了解应该如何在 Backbone 中执行此操作。
最佳答案
如果启用pushState,则需要拦截所有点击并防止刷新:
$('a').click(function (e) {
e.preventDefault();
app.router.navigate(e.target.pathname, true);
});
类似于:
$(document).ready(function(){
var HomeView = Backbone.View.extend({
initialize: function() {
console.log('initializing HomeView');
}
});
var AboutView = Backbone.View.extend({
initialize: function() {
console.log('initializing AboutView');
}
});
var AppRouter = Backbone.Router.extend({
routes: {
"": "index",
"about":"aboutView"
},
events: function () {
$('a').click(function (e) {
e.preventDefault();
SearchApp.navigate(e.target.pathname, true);
});
},
initialize: function(){
console.log('initialize app');
this.events();
this.HomeView = new HomeView();
},
index: function(){
this.HomeView = new HomeView();
},
aboutView : function() {
this.AboutView = new AboutView();
}
});
var SearchApp = new AppRouter();
Backbone.history.start({pushState: true});
});
关于javascript - 如何在 Backbone.js 中处理简单的点击事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14198959/