我遇到了用路由器查看交换机的问题。
我的应用程序是用 Backbone.js 编写的。它有 2 个 View :ApplicationView 和 ApplicationSubView。
本来，我认为如果发生点击事件，那么通过路由器应该移动页面
例如，任何点击具有 about 类的元素的人都必须经历移动和重新呈现的页面
var app = app || {};
$(function() {
'use strict';
var ApplicationView = Backbone.View.extend({
//bind view to body element (all views should be bound to DOM elements)
el: $('body'),
//called on instantiation
initialize: function() {
//set dependency on ApplicationRouter
this.router = app.Router;
this.subView = new ApplicationSubView();
//call to begin monitoring uri and route changes
Backbone.history.start();
},
showSpinner: function() {
console.log('show the spinner');
},
hideSpinner: function() {
console.log('hide the spinner');
},
loadSubView: function() {
this.showSpinner();
var subView = new SubView();
subView.on('render', this.hideSpinner);
}
});
var ApplicationSubView = Backbone.View.extend({
events: {
'click ul.pills li.home-pill a': 'displayHome',
'click ul.pills li.about-pill a': 'displayAbout',
'click ul.pills li.contact-pill a': 'displayContact'
},
displayHome: function() {
this.trigger('render');
console.log('a subView render');
this.router.navigate("home", true);
return this;
},
displayAbout: function() {
this.trigger('render');
console.log('a subView render');
this.router.navigate("about", true);
return this;
},
displayContact: function() {
this.trigger('render');
console.log('a subView render');
this.router.navigate("contact", true);
return this;
}
});
//load application
app.view = new ApplicationView();
});
最佳答案
虽然我无法真正理解问题的描述，但我可以看到需要完成很多改进，因此我对您的代码进行了完整的重构。
路由只是处理 URL 中的更改，因此您可以直接使用 anchor 标记，无需显式事件和 navigate来电。
这就是触发路由所需的全部内容。
<body>
<ul class="pills">
<li><a href="#/">Home</a></li>
<li><a href="#/about">About</a></li>
<li><a href="#/contact">Contact</a></li>
</ul>
<div id="content"></div>
</body>
请参阅<div id="content"></div> ？这是内容 div，也是其他页面所在的位置。我们将使用“布局” View 来管理它:
var app = app || {};
(function() {
'use strict';
var views = app.view = app.view || {};
views.Application = Backbone.View.extend({
initialize: function() {
// caching the jQuery object on init
this.$content = this.$('#content');
},
setContent: function(view) {
var content = this.content;
if (content) content.remove();
content = this.content = view;
this.$content.html(content.render().el);
},
});
// make a view for each sub-page
views.Home = Backbone.View.extend({ /* ... */ });
views.About = Backbone.View.extend({ /* ... */ });
views.Contact = Backbone.View.extend({ /* ... */ });
})();
然后，您需要定义一个处理这些路由的路由器。
var app = app || {};
(function() {
'use strict';
var views = app.view = app.view || {};
app.Router = Backbone.Router.extend({
routes: {
'about': 'aboutRoute',
'contact': 'contactRoute',
// put the catch-all last
'*home': 'homeRoute',
},
initialize: function() {
// create the layout once here
this.layout = new views.Application({
el: 'body',
});
},
homeRoute: function() {
var view = new views.Home();
this.layout.setContent(view);
},
aboutRoute: function() {
var view = new views.About();
this.layout.setContent(view);
},
contactRoute: function() {
var view = new views.Contact();
this.layout.setContent(view);
}
});
})();
并在文档准备好后使用它:
$(function() {
var router = new app.Router();
Backbone.history.start();
});
关于javascript - 如何在backbone.js中使用路由器切换 View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41073443/