How to use this demo:

Just enter some text in the form below then press "enter"!
Then try to press "Esc" while entering text or double clicking the input field.

TwitterSearch App

    What does it do?

    This is a really simple improvement of the Example 008 about Collections.
    Here we handle User Inputs to set what to search for.

    Search from Console!

    TwitterSearch App lyes in a global namespace "App".
    Internally are stored all components al follow:

    • App
      • tweets
      • viewport
        • titleView
        • formView
        • tweetsView

    Try this code in your console!
    App.tweets.search('@thepeg');

    Views binds Models

    When you perform a search the App creates a list of models, one per tweet.
    Then there is a View that creates one sub-view per tweet binding it's model.

    This works because we want to render each result by compiling a template with model's data.

    But TweetView can listen to binded model's "change" event to re-render itself!
    Try this code in your console!

    App.tweets.models[0].set('text','new text for the tweer');

    UI Events

    • enter text then click "Go!" - search
    • enter text then return - search
    • double click on input field - reset search
    • esc on input field - reset search

    Stress the Observe Pattern

    Objects never calls direct methods in this app! Even when methods are internal!
    All interactions belongs to events!

    What happen when clicking "go"?

    1. FormView intercepts the UI action and trigger a "performSearch" event on the TweetsCollection object passing the search text as option.
      this.collection.trigger( 'performSearch', this.$input.val() );

    2. TweetsCollection listen for a "performSearch", trigger a "searchStart" event on itself then fetch results from the remote web service.
      this.trigger( 'searchStart', q );
      • TitleView listen for "searchStart" and updates the title according with the search string
      • TweetsView listen for "searchStart" and display a waiting message
      • FormView listen for "searchStart" and clear the input text

    3. Collection's fetch() method trigger a "reset" event on the collection iteself. At this time new tweets area already stored into the collection's model property.
      • TweetsView listen for collection's "reset" event and starts to analyze collection's models
        if search is empty then trigger an "emptySearch" event.
        else trigger an "addItem" event on each collection's model item
      • TweetView listen for "emptySearch" event (triggered by itself) to display a warning message
      • TweetView listen for "addItem" event (triggered by itself) to create new sub-view and render a single tweet.

    It may seems a little verbose logic for a small application like TwitterSearch but coding (and thinking) this way ensures to maintain responsibilities of different objects separate form every else objects!

    Tutorials and Documentations