flickr.js

FlickrSearch is a simple web app to show off the powers of fidel

This is how you create a new Fidel Controller

The elements attribute gives you easy access to any of the dom nodes inside of your widget. You now have access to this.photos anywhere inside your code. An alternative is to add data-element="photos" to your html and this.photos will automatically bind to that element.

Events will automatically bind and proxy a selector to a function in your controller. In this case, every time you hit a key inside the search box, the function searchOnEnter is called

If you load str.js (inside ender in this case) along with fidel, you are able to directly render out a javascript template. The first step to get this working is setting the templateSelector to your javascript template in your markup.

init gets called when you call new FlickrSearch(). In this case, the object that was passed was { el: $("#FlickrSearch"), initialSearch: 'kitten' }. This will set the element for the controller to the #FlickrSearch node and set this.initialSearch to kitten.

Check if initialSearch was passed in

If it was, call our search function

searchOnEnter gets called whenever a key is pressed on the search box.

Check if enter was pressed, otherwise don't do anything

Grab the value from the search box, using this.searchBox which maps to .searchBox input - defined in the html using data-element="searchBox".

Execute another method in our controller to execute the search.

Called when clicking [data-action='searchAction']

Set the value of the search box to the search term. This is for if this.search() is called directly, without actually typing in the search box.

Give the user some input that things are happening.

Make a jsonp request out to flickr, passing in our query.

self.render takes a data object and an optional dom node. This will grab the template defined in templateSelector, pass in the data object, execute the template function in str.js and then render it to either this.el or the element passed in. In this case self.photos is mapped to the .photos dom node and the template will be rendered there.