progress_tracker.md

What is the role of the Backbone Router?

Why is MDB using that as the main point of entry for his app?

See http://addyosmani.github.io/backbone-fundamentals/#routers for a discussion of the router routes: { ':year/:termOne/:termTwo': 'renderGraph' } syntax. It's just a way to add params dynamically. Note that :year and :termOne and :termTwo, when matched, are passed to the renderGraph function like so renderGraph: function (year, termOne, termTwo) { ... }

From Backbone Fundamentals:

In Backbone, routers provide a way for you to connect URLs (either hash fragments, or real) to parts of your application. Any piece of your application that you want to be bookmarkable, shareable, and back-button-able, needs a URL.

An application will usually have at least one route mapping a URL route to a function that determines what happens when a user reaches that route. This relationship is defined as follows: 'route' : 'mappedFunction'

Next, we need to initialize Backbone.history as it handles hashchange events in our application. This will automatically handle routes that have been defined and trigger callbacks when they’ve been accessed.

The Backbone.history.start() method will simply tell Backbone that it’s okay to begin monitoring all hashchange events as follows:

Pass params to fetch like so: this.fetch({ data: $.param({ terms: this.terms, year: this.year}) });. Also see SO http://stackoverflow.com/questions/6659283/backbone-js-fetch-with-parameters.

If you would like to update the URL to reflect the application state at a particular point, you can use the router’s .navigate() method. By default, it simply updates your URL fragment without triggering the hashchange event:

It is also possible for Router.navigate() to trigger the route along with updating the URL fragment by passing the trigger:true option. (MDB does this)

Note: This usage is discouraged. The recommended usage is the one described above which creates a bookmarkable URL when your application transitions to a specific state.

In the sample Todo app, most of the logic is kicked off in the view, not the router.

I'm trying to figure out how the URL in the navbar is changed. For the Todo app, there are actual hyperlinks in the markup:

<script type="text/template" id="stats-template">
    <span id="todo-count"><strong><%= remaining %></strong> <%= remaining === 1 ? 'item' : 'items' %> left</span>
    <ul id="filters">
      <li>
        <a class="selected" href="#/">All</a>
      </li>
      <li>
        <a href="#/active">Active</a>
      </li>
      <li>
        <a href="#/completed">Completed</a>
      </li>
    </ul>
    <% if (completed) { %>
    <button id="clear-completed">Clear completed (<%= completed %>)</button>
    <% } %>
  </script>

and this quote:

The #stats-template displays the number of remaining incomplete items and contains a list of hyperlinks which will be used to perform actions when we implement our router. It also contains a button which can be used to clear all of the completed items.

The HTML produced by the preceding step contains a list of filter links. The value of app.TodoFilter, which will be set by our router, is being used to apply the class selected to the link corresponding to the currently selected filter. This will result in conditional CSS styling being applied to that filter.

Look at how render in 'views/app.js' is interacting with app.TodoFilter and how 'router.js' uses app.TodoFilter in the setFilter() function.