jQuery, jQueryUI, Backbone, Underscore Test
testing this nice stuff
by nickadeemus2002
HTML
<script src="http://chrisvillanueva.com/bountytests/js/underscore.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css">
<script src="http://chrisvillanueva.com/bountytests/js/backbone.js"></script>
<div class="demo">
<!-- begin #tabs -->
<div id="tabs">
<ul id="tabLinks">
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu. Paragraph in tab 1</p>
<p>bb anchor 1 test: <a href="#action">Activate route</a></p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat. Paragraph in tab 2</p>
<p>bb anchor 2 test: <a href="#/route1/action2">Activate another route</a></p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Paragraph in tab 3.</p>
</div>
</div>
<!-- /#tabs -->
</div>
JavaScript
//backbone stuff
var AppRouter = Backbone.Router.extend({
routes: {
// matches http://example.com/#anything-here
////"*actions": "defaultRoute"
":action": "defaultRoute",
"/:route/:action": "secondRoute"
},
initialize: function(){
var tabsDiv = $('#tabs');
tabsDiv.tabs();
tabsDiv.bind( "tabsselect", function(event, ui) {
console.log(event);
console.log(ui);
});
},
defaultRoute: function( action ){
// The variable passed in matches the
//variable in the route definition "actions"
console.log('the current action is:');
console.log( action );
},
secondRoute: function( route, action ){
console.log('the current route is:');
console.log( route );
console.log('the current action is:');
console.log( action );
}
});
// Initiate the router
var app_router = new AppRouter;
// Start Backbone history a neccesary step for bookmarkable URL's
Backbone.history.start();