我目前正在为我的 Web 应用程序使用 jQuery、Twitter Bootstrap 和 CanJS。我正在尝试使用 CanJS 实现路由。我正在使用 Bootstrap 的选项卡,当我单击一个选项卡时,它应该会带上 #tabSearch、#tabUser 或 #tabPermissions,但哈希返回的是一个空字符串。我究竟做错了什么?
我正在使用它来更改标签:
TabControl = can.Control.extend({}, {
init: function (element, options) {
element.find('a[href="' + options.defaultTab + '"]').tab('show');
this.userSearch = null;
this.userForm = null;
}
, 'a[data-toggle="tab"] show': function (e) {
this.options.tabChangeCallback(e);
}
});
UserTab = new TabControl('#tabctrlUser', {
defaultTab: '#tabSearch',
tabChangeCallback: function (e) {
if (e.context.hash == '#tabSearch') {
if (!this.userSearch) {
this.userSearch = new FormUserQuery('#tabSearch', {});
}
} else if (e.context.hash == '#tabUser') {
if (!this.userForm) {
this.userForm = new FormUser('#tabUser', {});
}
this.userForm.renderView(currentUser);
} else if (e.context.hash == '#tabPermissions') {
new FormPermissions('#tabPermissions', {});
}
}
});
这是 HTML 部分:
<ul id="tabctrlUser" class="nav nav-tabs">
<li><a href="#tabSearch" data-toggle="tab">Pesquisar</a></li>
<li><a href="#tabUser" data-toggle="tab">Cadastrar/Alterar</a></li>
<li><a href="#tabPermissions" data-toggle="tab">Acessos</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tabSearch"></div>
<div class="tab-pane" id="tabUser"></div>
<div class="tab-pane" id="tabPermissions"></div>
</div>