Underscore.js templating

by gianlucaguarini

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<p>Menu</p>
<ul>
    <li><a href="#help">Help</a></li>
    <li><a href="#search/babbo/p30">Query di esempio</a></li>
</ul>
<p>Risultato</p>
<div id="result"></div>

JavaScript

// ogni oggetto backbone bisogna istanziarlo come estensione della classe di cui fa parte 
var Workspace = Backbone.Router.extend({
// il parametro routes contiene tutte i valori di hash che possono lanciare un metodo nella nostra applicazione
  routes: {
// il parametro help lancia il metodo help dell'oggetto Workspace
    "help":                 "help",    // #help
// il parametro search lancia il metodo search , da notare i due punti che specificano i valori passati alle funzioni javascript
    "search/:query":        "search",  // #search/kiwis
    "search/:query/p:page": "search"   // #search/kiwis/p7
  },

  help: function() {
    $('#result').html('help')
  },

  search: function(query, page) {
    $('#result').html('query= '+query+' page= '+page)
  }

});

var workspace = new Workspace;
Backbone.history.start();