I've finally gotten around to writing an example app for fidel. Using flickr's jsonp endpoint, I've created a simple flickr search app using fidel. Hopefully this will better show how easy it is to create web apps with fidel.

Here's a preview:

View the Demo | View the Annotated Source

Fidel is a small library for building out ui components (widgets, modules, plugins, whatever you want to call them). It looks very similar to backbone.js and spine.js's controller. I tried both backbone and spine and what I found is that i only ended up using the controller logic and very little of the model and routing side. So, in the spirit of the micro js movement, I have created a standalone controller library.

You'll need a library like ender, jquery or zepto to provide some of the magic behind the scenes and if you are using ender, you can add fidel by running: ender add fidel

Here are the source/docs: github

You can download the latest version here: dev / min

var FlickrSearch = Fidel.extend({
  elements: {
    'photos': '.photos'
  },
  events: {
    'searchOnEnter': 'keypress .searchBox input'
  },
  templateSelector: "#PhotoTemplate",
  init: function() {
    if (this.initialSearch)
      this.search(this.initialSearch);
  },
  searchOnEnter: function(e) {
    if (e.keyCode != 13) return;
    var query = this.searchBox[0].value;
    this.search(query);
  },
  searchAction: function() {
    this.search(this.searchBox[0].value);
  },
  search: function(query) {
    var self = this;
    this.searchBox[0].value = query;
    this.searchBox[0].select();
    this.photos.html("<div class='loading'>Searching Flickr...</div>");
    $.ajax({
      url: 'http://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=flickSearch&tags='+escape(query),
      type: 'jsonp',
      success: function(resp) {
        self.render(resp, self.photos);
      }
    });
  }
});

You can check out the demo here