Question

我的页面上有bootstrap nav-pills。

这是代码的一部分：



  <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>

<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>

现在我想在有人点击标签时更改网址哈希。 bootstrap是否有一些功能或插件，或者我需要手动编写此功能？

例如，如果我这样做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（在视图中，路由器或其他部分代码中）？

Answer 1

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

在我的实现（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();

});

最后你看了.js：

manageTab: function(e) {

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

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

希望有所帮助

如何使用marionetteJS正确更改url hash with bootstrap tabs（pills）？

1 个答案: