title: How to refresh templates in Ember when data is added/removed?
body: <p>I have a simple part of my Ember application that's supposed to draw a list of books. The issue is that if the user visits the list before the books are loaded from the server, the list will be empty. Even after the data finishes loading, the list will still be empty.</p>
  
  <p>What methods does Ember have to to refresh the view after data is loaded? And where would be the appropriate place to put this code? Here's what my code looks like:</p>
  
  <p>Route:</p>
  
  <pre><code>App.MyRoute = Ember.Route.extend({
    model: function() {
      return App.store.find(App.Book); // get books from the server
    }
  });
  </code></pre>
  
  <p>Template:</p>
  
  <pre><code>{{#each book in model}}
    &lt;li {{ bindAttr data-book-id="book.id" }}&gt;
      &lt;span&gt;{{ book.name }}&lt;/span&gt;
    &lt;/li&gt;
  {{/each}}
  </code></pre>
  
  <p>For the record, I would like to do something like this:</p>
  
  <pre><code>{{#if model.get('isLoaded')}}
    {{#each book in model}}
      &lt;li {{ bindAttr data-book-id="book.id" }}&gt;
        &lt;span&gt;{{ book.name }}&lt;/span&gt;
      &lt;/li&gt;
    {{/each}}
  {{else}}
     &lt;span&gt;Loading books...&lt;/span&gt;
  {{/#if}}
  </code></pre>