# 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