Ember Search basics

Basics of Ember search

by jdcravens

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script src="http://builds.emberjs.com/canary/ember-data.js"></script>
  <script type="text/x-handlebars" >
    {{view App.SearchBox placeholder="Youtube Search"}}
    {{render search}}
  </script>

  <script type="text/x-handlebars" data-template-name="search">
    <h3>Search Results</h3>
    {{#if controller.isSearching}}
      Searching ...
    {{/if}}

    {{#each controller.content}}
      {{#view App.SearchResult videoBinding="this"}}
        <p>{{title}}</p>
      {{/view}}
    {{/each}}

    {{#view App.Player}}
      <h3>{{controller.selectedVideo.title}}</h3>
      <iframe width="450" height="275" {{bindAttr src="controller.selectedVideo.url"}} frameborder="1" ></iframe>
    {{/view}}
  </script>

JavaScript

App = Ember.Application.create({
  LOG_TRANSITIONS: true,
  LOG_VIEW_LOOKUPS: true,
  LOG_ACTIVE_GENERATION: true
});

App.Video = Em.Object.extend({
  title: null,
  seconds: null,
  yid: null
});

App.SearchController = Em.ArrayController.extend({
  selectedVideo: null,
  content: [],
  isSearching: false,

  search: function(query) {
    var self = this;

    // Start searching and remove existing results
    this.set('isSearching', true);
    this.set('content', []);

    var c = $.getJSON("http://gdata.youtube.com/feeds/api/videos",
        { alt: 'json', 'max-results': 7, v: 2, q: query });

    c.success(function(data) {
      var entries = data.feed.entry, results = [];

      for (var i = 0; i < entries.length; i++) {
        var e = entries[i];
        results.push(App.Video.create({
          yid: e.id.$t.split(':')[3],
          seconds: parseInt(e.media$group.yt$duration.seconds),
          title: e.title.$t,
          url: 'http://www.youtube.com/embed/' + e.id.$t.split(':')[3]
        }));
      }
      console.log(results)
      self.set('content', results);
    });

    c.complete(function() {
      self.set('isSearching', false);
    });
  }
});

App.SearchBox = Em.TextField.extend({
  insertNewline: function() {
    var query = this.get('value');
    this.container.lookup('controller:search').search(query);
  }
});

App.SearchResult = Em.View.extend({
  click: function(evt) {
    this.container.lookup('controller:search').set('selectedVideo', this.get('video'));
  }
});

App.Player = Em.View.extend({});