title: Prevent re-rendering Ember view if model data hasn't changed
body: <p>I'm trying to create an auto-complete feature, which grabs movies from the Trakt API and renders the top 3 results onto the page.  I get new data every time the "query" text (from the input) is changed.  However, <strong>Ember re-renders the page even when those 3 models stay the same.</strong>  How do I prevent this?  Is there a way to add some sort of check to see whether the movie.title and movie.year is different within the Handlebars template?  Or a check within the controller that will only set a new model if it is different?</p>
  
  <h1>Example:</h1>
  
  <p>If I type <strong>"how"</strong> as my query, the page will render:</p>
  
  <ul>
  <li>How to Train Your Dragon (2010)</li>
  <li>How the Grinch Stole Christmas (2000)</li>
  <li>How the Grinch Stole Christmas! (1966)</li>
  </ul>
  
  <p>If I add a 't', so that my query becomes <strong>"how t"</strong>, the page will re-render the same content, creating an unnecessary flash of the data being gone and the same data reappearing again:</p>
  
  <ul>
  <li>How to Train Your Dragon (2010)</li>
  <li>How the Grinch Stole Christmas (2000)</li>
  <li>How the Grinch Stole Christmas! (1966)</li>
  </ul>
  
  <h1>Code:</h1>
  
  <p>HTML</p>
  
  <pre><code>&lt;script type="text/x-handlebars" data-template-name="application"&gt;
      &lt;div class="hero-unit"&gt;
      &lt;h1&gt;App&lt;/h1&gt;
      {{outlet}}
      &lt;/div&gt;
  &lt;/script&gt;
  &lt;script type="text/x-handlebars" data-template-name="index"&gt;
      {{input value=query}}
      &lt;div class="prompt"&gt;
        {{prompt}}
      &lt;/div&gt;
  
      {{#if moviesAvailable}}
        {{#each movie in movies}}
          &lt;li&gt;{{movie.title}} ({{movie.year}})&lt;/li&gt;
        {{/each}}
      {{/if}}
  &lt;/script&gt;
  </code></pre>
  
  <p>Javascript (a change in "query" in the IndexController triggers a change in "query" in the MovieController, which prompts it to set a new model)</p>
  
  <pre><code>var App;
  
  App = Ember.Application.create();
  
  App.Movie = DS.Model.extend({
    title: DS.attr('string'),
    year: DS.attr('number'),
    fanart: DS.attr('string'),
    poster: DS.attr('string'),
    overview: DS.attr('string')
  });
  
  App.IndexController = Ember.ArrayController.extend({
    needs: "movies",
    movies: Ember.computed.alias("controllers.movies"),
    query: '',
    prompt: '',
    moviesAvailable: false,
    queryChanged: (function() {
      var length;
      length = this.get('query').length;
      if (length === 0) {
        this.set('moviesAvailable', false);
        return this.set('prompt', 'Please type two more characters.');
      } else if (length === 1) {
        this.set('moviesAvailable', false);
        return this.set('prompt', 'Please type one more character.');
      } else {
        this.set('moviesAvailable', true);
        this.set('prompt', '');
        return this.get('movies').set('query', this.get('query'));
      }
    }).observes('query')
  });
  
  App.MoviesController = Ember.ArrayController.extend({
    queryChanged: (function() {
      var newmodel;
      newmodel = this.store.find('movie', {
        query: this.get('query'),
        limit: 3
      });
      return this.set('model', newmodel);
    }).observes('query')
  });
  
  
  App.MovieAdapter = DS.RESTAdapter.extend({
    host: 'http://api.trakt.tv/search/movies.json',
    namespace: '5aa5a25cfc06d869c136725b2b29d645',
    ajaxOptions: function(url, type, hash) {
      hash = this._super(url, type, hash);
      hash.dataType = 'jsonp';
      return hash;
    }
  });
  
  App.MovieSerializer = DS.RESTSerializer.extend({
    normalizeHash: {
      movie: function(hash) {
        hash.id = hash.tmdb_id;
        hash.fanart = hash.images.fanart;
        hash.poster = hash.images.poster;
        delete hash.images;
        return hash;
      }
    },
    normalizePayload: function(payload) {
      var json;
      json = {
        "movie": payload
      };
      return json;
    }
  });
  </code></pre>