17049

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

Question:

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

Answer1:

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

Recommend

  • NetBeans + Mercurial + SSH = Endless Pull/Push
  • Add wordpress visual editor to site pages
  • ASP.Net Insert to database not updating
  • Handler postDelayed delayed longer as configured
  • remote debug unmanaged code
  • Java Comparing two identical objects gives false [duplicate]
  • alternative jquery library to triger beforeunload/unload event
  • How do you remove old version of entity framework in GAC?
  • How do I access SQL from XPages
  • Why isn't RAD (Eclipse) able to properly detect WAS server startup?
  • Circle movement upon rectangle Collision
  • Leaflet z-index
  • MAVEN : Run Multiple Maven Project using Maven Test
  • TFS - how do I sum child task hours to parent
  • jquery validation - waiting for remote check to complete
  • How do I display a dialog that asks the user multi-choice questıon using tkInter?
  • as3-flash: any way to access all the instances placed in different frames from document class?
  • how does System.Web.HttpRequest::PathInfo work?
  • How to use carriage return with multiple line?
  • Test if a set exists before trying to drop it
  • Chrome doesn't support silverlight anymore? How to solve this?
  • Cancel a live stream “fast motion” catch-up in Flash
  • Email format validation in mvc3 view
  • QLineEdit password safety
  • C# - Is there a limit to the size of an httpWebRequest stream?
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • How to add date and time under each post in guestbook in google app engine
  • jquery mobile loadPage not working
  • jQuery tmpl and DataLink beta
  • Calling of Constructors in a Java
  • Traverse Array and Display in markup
  • Transpose CSV data with awk (pivot transformation)
  • Data Validation Drop Down Box Arrow Disappearing
  • How to delete a row from a dynamic generate table using jquery?
  • json Serialization in asp
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • Why can't I rebase on to an ancestor of source changesets if on a different branch?
  • How do you join a server to an Active Directory (domain)?
  • coudnt use logback because of log4j
  • How to stop GridView from loading again when I press back button?