how correctly change url hash with bootstrap tabs(pills) using marionetteJS?

问题

I have bootstrap nav-pills on my page.

This is part of code:

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

Now I want to change url hash when someone click on tab. Does bootstrap have some functionality or plugins for this or I need to write this functionality manually?

For example, if I do it manualy - smth like this:

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

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

How it correctly do using backdone.marionette ( in view, in routers or in other parts code ) ?

回答1:

for backbone/backbone.marionette implementation: its a combination of configuring the rout in you router file and triggering that rout from within your view, of course you must supply the parameters for the desired state you want to retrieve.

in my implementation (marionette) i trigger this from my controller so:

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();

});

and finally you view.js:

manageTab: function(e) {

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

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

hope that helps

来源：https://stackoverflow.com/questions/16422246/how-correctly-change-url-hash-with-bootstrap-tabspills-using-marionettejs

标签

backbone.js

twitter-bootstrap

tabs

marionette