Question

我在index.html中构建了几个标签，如下所示：

<div class="container">
    <div class="tabbable">
            <ul class="nav nav-pills nav-tabs">
                <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
                <li><a href="#new" data-toggle="tab">New Request</a></li>
                <li><a href="#queuepane" data-toggle="tab">Queue</a></li>
            </ul>
        </div>
        <div id="appTabs" class="tab-content">
            <div id="home" class="tab-pane active"></div>
            <div id="new" class="tab-pane">
            <div id="queue" class="tab-pane"></div>
        </div>
     </div>
</div>

使用Backbone.js路由点击标签时，如何更改网址？

Answer 1

我使用我在网上找到的一些建议解决了这个问题。以下是它在coffeescript中的表现：

在路由器的初始化函数中：

$('.tl-navigation-tabs a').click (e) =>
    e.preventDefault()
    @navigate("#{e.target.innerHTML}/", {replace: true, trigger: true})

触发器：true表示如果导航到的url与路由器中的路由匹配，则它将委托给另一个函数。所以这里我为每个选项卡都有一个路由，然后在通过该路由调用的函数内部：

$(".tl-navigation-tabs a[href='#Events']").tab('show')

这可能是一种更优雅的方式，但最终完全符合我的需要。

Answer 2

请**使用data-target属性而不是href和

手动更改使用Backbone.histroy.navigate（＆＃39; url＆＃39;，false）; **

http://jsfiddle.net/sedhuait/4mxmtn0d/

http://getbootstrap.com/javascript/#tabs

 <li id="byNumberLi" role="presentation" class=""><a id="byNumberTabLink" data-target="#assignmentByNumberTabConent" data-toggle="tab" role="tab" ><span class="fa fa-list-alt"></span>List
                    By Number</a></li>

如何使用backbone.js使用bootstrap选项卡进行路由？

2 个答案: