flickr.js

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

This is how you create a new Fidel Controller

undefined

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.

undefined

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

undefined

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.

undefined

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.

undefined

Check if initialSearch was passed in

undefined

If it was, call our search function

undefined

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

undefined

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

undefined

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

undefined

Execute another method in our controller to execute the search.

undefined

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

undefined

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.

undefined

Give the user some input that things are happening.

undefined

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

undefined

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.

undefined
undefined