I'm working on a project which will have dynamic tabs. I really like jQuery UI and its tabs implementation, which I've used for various projects to great success.

For this project, I'm using Backbone.js to make the project a single-page web application. I'm just getting to know Backbone; it's pretty well thought out MVC-like framework. Doesn't mean it's trivial to learn, though :-)

So I ran into a problem: I wanted to build the tabs using Backbone, which went fine initially. Then I wanted to set up a form to let you create a new tab, and this is where I ran into problems. Initially, the code the markup, which then jQuery would ignore, that is, the markup was there, but the tab UI elements were not. Then, in my initial Backbone view implementation, the tab body content would get rendered multiple times, once for each subsequently added tab!


Finally, with a bit of digging around on the internet, I found this post which showed how to use the official jQuery UI tabs API to add and remove tabs.

One thing about that post... it's a little bit out of date; you can delete tabs by referencing their ID, you don't have to dig through the DOM to figure out which index to use to delete the tab.

Note: I don't use a collection to keep track of the tabs. This isn't a problem for my application, which keeps the tabs on the server, and then presents them as needed.

So here's a demo that shows off pre-existing tabs,
adding and removing tabs, all within Backbone.

The code is up on GitHub.