如何正确更改使用marionetteJS的引导选项卡（丸）的URL哈希？

我在我的页面上有引导nav-pills。如何正确更改使用marionetteJS的引导选项卡（丸）的URL哈希？

这部分代码：

 <ul class="nav nav-pills offset3"> 
    <li class="active"> 
     <a href="#alphabetical" class="alphabetical_tab" data-toggle="pill"> 
     Поиск по алфавиту 
     </a> 
    </li> 
    <li> 
     <a href="#name_search" class="name_search_tab" data-toggle="pill"> 
     Поиск по имени 
     </a> 
    </li> 
    <li> 
     <a href="#new_characteristic" data-toggle="pill" class="new_category_characteristic">   
     Создать характеристику 
     </a> 
    </li> 
    </ul> 
    <div class="tab-content"> 
    <div id="alphabetical" class="tab-pane active"> 
     content 1 
    </div> 
    <div id="name_search" class="tab-pane"> 
     content 2 
    </div> 
    <div id="new_characteristic" class="tab-pane"> 
     content 3 
    </div>

现在我想改变URL哈希当有人点击选项卡。引导是否有一些功能或插件，或者我需要手动编写此功能？

例如，如果我这样做manualy - 水木清华这样的：

 $(function(){ 
    var hash = window.location.hash; 
    hash && $('ul.nav a[href="' + hash + '"]').tab('show'); 

    $('.nav-tabs a').click(function (e) { 
    $(this).tab('show'); 
    }); 
});

如何它正确地做使用backdone.marionette（在视图中，路由器或其他地区代码）？

来源

2013-05-07 bmalets

骨干/ backbone.marionette实现：它是在您的路由器文件中配置路由并从您的视图中触发该路由的组合，当然，您必须提供您想要检索的所需状态的参数。

在我的实现（木偶）我触发这个从我的控制器，以便：

router.js：

define([ 
    "marionette", 
    "controller" 
], 
function (Marionette, appController){ 
    "use strict"; 

    var AppRouter = Backbone.Marionette.AppRouter.extend({ 

     appRoutes : { 
      "mainview/id/:tabName": "showTabFunction" 
    }); 

    return new AppRouter({controller:appController}); 

});

controller.js：

define([ 
    'marionette', 
    'myapp', 
    'vent', 
    'userSession', ], 

function(Marionette, App, vent, userSession) { 

    var MyController = Marionette.Controller.extend({ 

     showTabFunction: function(tabName) { 
      this.isAuthenticated(); 

      require(['path/to/my/files'], function(page) { 
       var page= new page({ 
        tab:tabName 
       }); 
       App.main.currentView.content.show(page); 
      }); 
     } 

    }) 

    return new MyController(); 

});

最后你view.js ：

manageTab: function(e) { 

     this.curTab = $(e.target).attr("data-id"); 

     //update URL 
     App.Router.navigate("mainview/id/"+this.curTab, { 
      trigger: false 
     }); 
    },

希望帮助

来源

2013-05-07 22:30:55 danikoren

如何正确更改使用marionetteJS的引导选项卡（丸）的URL哈希？

回答

相关问题