Backbone.js con Twitter Bootstrap Tabs - Eliminar # en enlaces

I'm using Twitter bootstrap's tabs plugin and it requires the link that activates to tab to contain the URL fragment beginning with a # seguido por las bases id of the div containing the tab's HTML content.

 <a href="#home" data-toggle="tab">Home</a>
 <div class="tab-pane" id="home">...</div>

Is there any way to get rid of having to use the #? Also, I tried removing the # in link and clicking on the link somehow does not make the browser follow the link!

I am using backbone.js and pushstates, so I'm looking to have the link not containing the #, and clicking on it should update the web address to mydomain.com/home en lugar de mydomain.com/#home.

 <a href="home" data-toggle="tab">Home</a>
 <div class="tab-pane" id="home">...</div>

Y...

$(function() {
    $('a[data-toggle="tab"]').on('shown', function(e) {
        // Update URL in address bar to trigger Backbone.js's router
        window.location.hash = e.target.hash;
    });
});

Can this be done? Or am I better off using backbone.js to write my own tabs functionality?

preguntado el 31 de julio de 12 a las 13:07

I guess that it is implemented that way so that the webpage would degrade gracefully. Clicking on tabs shouldn't update your web address (unless your browser isn't using javascript). Apparently what you want is some kind of navigation that looks like tabs, but isn't really tabs and uses routing instead? -

I'm thinking of letting the clicks on tab change the url in the browser, as well as trigger the router's functions which will hide/show the tab panes. -

then you'll probably need to roll your own tabs, be sure to open source the results or post them here, when you're done so others can use them also! :) -

2 Respuestas

just set a data-url attribute on the

y haz algo como:

events:
  'show .nav-tabs a': 'navigateTab'

navigateTab: (e) ->
  target = $(e.currentTarget)
  @router.navigate(target.data('url'), trigger: false)

Respondido el 28 de diciembre de 12 a las 15:12

I can see that there are different types of tabs, if you follow the Ejemplo de pestañas básicas en lugar de la Tabbable example esto no funciona?

http://twitter.github.com/bootstrap/components.html#navs

I think the main problem here is that the Tabbable example uses a jQuery plugin which probably conflicts with backbone.js binding.

Respondido 31 Jul 12, 13:07

Estoy usando el tabbable plugin. If I use backbone, should I be using just bootstrap's CSS and not the plugin, and write the tabs functionality myself in backbone? (model: Tab, collection: TabList, View: tabBarView, tabContentsView) - nyxynyx

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.