app.coffee

collection = Backbone.Collection.extend(
  initialize: ->
    @term = ""
    @page = ""

  url: ->
    "url-to-data?" + @term
)

# when user clicks a sort header, set props on collection
setTerm = ->  
  # assumes
  # <li data-term="foo">Foo</li>
  term = $(this).data("term")
  collection.term = term


# set page and fetch when link is clicked
setPageThenFetch = (e) ->
  e.preventDefault()
  page = $(this).attr("href").text()
  collection.page = page
  collection.fetch() # listen for response, bind to collections `reset` event


# just an object, not a backbone view
View = (el, options) ->
  @init.apply this, arguments_

View:: =
  init: (el, options) ->
    @$el = el
    @collection = options.collection
    @templateSelector = options.templateSelector
    @hbt = $(@templateSelector).html()
    @tmpl = Handlebars.compile(@hbt)

  render: ->
    content = @tmpl(@collection.toJSON())
    @$el.html content


bindEvents = ->
  
  # instantiate
  _view = new View($("#results"),
    collection: collection
    templateSelector: "#your-script-template"
  )
  
  # calls _view.render, binds `this` context 
  # to the _view object
  collection.on "reset", _view.render, _view
  
  # setters
  $(".terms-header").on "click", "li", setTerm
  $(".links").on "click", "a", setPageThenFetch

app.js

// collections store arrays of models
var collection = Backbone.Collection.extend({
  
  // Backbone calls this when you instantiate
  initialize: function(){
    this.term = ''; // default term?
    this.page = '';
  },
  
  // optionally define a parse method, and return array of objects
  //parse: function(response){
    // key into response if necessary, e.g.
    // var items = response.data.items;
    // return items; //
  //},
  
  // Backbone calls this internally, to construct the URL for AJAX
  url: function(){
    // TODO -- join to make qs, e.g. ?foo=bar&baz=bat
    return 'url-to-data?' + this.term;
  }  
});

// when user clicks a sort header, set props on collection
function setTerm(){
  // assumes
  // <li data-term="foo">Foo</li>
  var term = $(this).data('term');
  collection.term = term;
}

// set page and fetch when link is clicked
function setPageThenFetch(e){
  e.preventDefault();
  
  var page = $(this).attr('href').text();
  collection.page = page;
  collection.fetch(); // listen for response, bind to collections `reset` event
}

// just an object, not a backbone view
function View(el, options){
  this.init.apply(this, arguments);
}
View.prototype = {
  init: function(el, options){    
    this.$el = el; // where do we render this?
    
    this.collection = options.collection; // backbone collection
    
    this.templateSelector = options.templateSelector; // define script template, pass selector
    
    this.hbt = $(this.templateSelector).html(); // get html for template
    
    this.tmpl = Handlebars.compile(this.hbt); // compile
  },
  
  render: function(){   
    var content = this.tmpl(this.collection.toJSON());
    this.$el.html(content);
  }
}

function bindEvents(){
  
  // instantiate
  var _view = new View( $('#results'), {
    collection: collection, 
    templateSelector: '#your-script-template'
  });
  
  // calls _view.render, binds `this` context 
  // to the _view object
  collection.on('reset', _view.render, _view);
  
  // setters
  $('.terms-header').on('click', 'li', setTerm);
  $('.links').on('click', 'a', setPageThenFetch);
}