Question

我在网上找到了一个关于如何route bootstrap tabs with sammyjs.的示例。这是在示例中执行路由的脚本...

<script type="text/javascript">
//Update the URL with the current tabs hash
$("#myTabs a").click(function () { location.hash = $(this).attr('href'); });
function ShowTab(tabname) {
//Show the selected tab
$('#myTabs a[href="#' + tabname + '"]').tab('show');
}
// Client-side routes
Sammy(function () {
this.get('#:selectedtab', function () {
ShowTab(this.params.selectedtab);
});
//default to the first tab if there is no hash in the URL
this.get('', function () { this.app.runRoute('get', '#tab1') });
}).run();
</script>

然后，我想添加Knockout，我提到了这个webmail knockout example。该示例使用以下脚本进行路由...

function WebmailViewModel() {
    // Data
    var self = this;
    self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
    self.chosenFolderId = ko.observable();
    self.chosenFolderData = ko.observable();
    self.chosenMailData = ko.observable();

    // Behaviours    
    self.goToFolder = function(folder) { location.hash = folder };
    self.goToMail = function(mail) { location.hash = mail.folder + '/' + mail.id };

    // Client-side routes    
    Sammy(function() {
        this.get('#:folder', function() {
            var folder = this.params.folder;
            self.chosenFolderId(folder);
            self.chosenMailData(null);

            $.ajax({
                type: 'POST',
                url: '/echo/json/',
                data: {
                    json: JSON.stringify({ folder: folder }),
                    delay: 0
                },
                success: function(data) {
                    self.chosenFolderData({ mails: fakeData[folder] });
                }
            });
        });

        this.get('#:folder/:mailId', function() {
            var folder = this.params.folder,
                mailId = this.params.mailId;

            self.chosenFolderId(folder);
            self.chosenFolderData(null);

            $.ajax({
                type: 'POST',
                url: '/echo/json/',
                data: {
                    json: JSON.stringify({ mailId: mailId }),
                    delay: 0
                },
                success: function(data) {
                    self.chosenMailData(ko.utils.arrayFirst(fakeData[folder], function(item) {
                        return item.id == mailId;                                              
                    }));              
                }
            });
        });

        this.get('', function() { this.app.runRoute('get', '#Inbox') });
    }).run();    
};

ko.applyBindings(new WebmailViewModel());

我的导航功能在点击和使用散列网址时都非常完美。导航活动类根据我键入的链接而更改，但选项卡不会更改。我试图通过网址导航到标签，但我不能。这是我的实施......

function ViewModel() {
            // Data
            var self = this;
            self.navis = ['Home', 'Aspirants', 'Vote', 'Results'];
            self.chosenNaviId = ko.observable();

            // Behaviours    
            self.goToNavi = function(navi) { location.hash = navi };
            self.showTab = function(navi) { $('#myTab a[href="#' + navi + '"]').tab('show');}

            // Client-side routes    
            Sammy(function() {
                this.get('#:navi', function() {
                    var navi = this.params.navi;
                    self.chosenNaviId(navi);
                    //alert('cant navigate tab');
                    self.showTab(navi);
                });

                this.get('', function() { this.app.runRoute('get', '#Home') });
            }).run();    
        };
        ko.applyBindings(new ViewModel());

我的HTML就是这个......

    <div style="" class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul id="myTab" class="nav nav-tabs nav-justified" data-bind="foreach: navis">
                            <li data-bind="css: { active: $data == $root.chosenNaviId()}"><a data-toggle="tab" data-bind="text: $data, attr: { href: '#' + $data }, click: $root.goToNavi"></a></li>
                        </ul>
                    </div>
<div style="padding-top: 20px;" id="myTabContent" class="tab-content"> 
    <div class="tab-pane fade in active" id="Home"> Home </div>
    <div class="tab-pane fade in active" id="Aspirants"> Aspirants </div>
    <div class="tab-pane fade in active" id="Vote"> Vote </div>
    <div class="tab-pane fade in active" id="Results"> Results </div>
</div>

请有人帮帮我...

更新1
我能够实现一些基本的路由，这工作得很好，但是在刷新时，BAM！...页面空白....我的实现是尝试切换标签本身，因为我意识到导航活动类更改适当地改变标签，但反之亦然。所以，我如何修改我的下面的代码，以实现一些不错的理想路由？

function ViewModel() {
            // Data
            var self = this;
            self.navis = ['Home', 'Aspirants', 'Vote', 'Results'];

            // Behaviours       
            self.goToNavi = function(navi) { 
                location.hash = navi;
            };
            self.chosenTab = function(tabname) {
                $('#myTab a[href="#' + tabname + '"]').tab('show');
            }

            // Client-side routes    
            Sammy(function () {
                this.get('#:navi', function () {
                    self.goToNavi(this.params.navi);
                    self.chosenTab(this.params.navi);
                });

                this.get('', function() { this.app.runRoute('get', '#Home') });
            }).run();
        };

        ko.applyBindings(new ViewModel());

Answer 1

你需要在你的锚标记上使用data-target，你需要将其添加到数据绑定属性中

attr: {'data-target': '#' + $data}

使整个锚看起来像：

<a data-toggle="tab" data-bind="text: $data, attr: { href: '#' + $data, 'data-target': '#' + $data }, click: $root.goToNavi"></a>

Sammyjs，Knockoutjs和Bootstrap标签

1 个答案: