Ember.js Access Ember.Checkbox Checkedbinding

How to access a Ember.Checkbox checked Binding from an event in TextField

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>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script type="text/x-handlebars" >
    {{view App.SearchBox placeholder="Music Search"}}

    <!-- filters -->

      <label>
        Artists
      </label>
        {{view Ember.Checkbox checkedBinding="artistsIsChecked"}}     

      <label>
        Songs
      </label>
        {{view Ember.Checkbox 
          checkedBinding="songsIsChecked"
        }}     

      <label>
        Albums
      </label>
        {{view Ember.Checkbox 
          checkedBinding="albumsIsChecked"
        }}     

    <!-- filters -->

    {{render artists}}

  </script>


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

      {{#each model}}
        {{#view App.ArtistSearchResult searchResultBinding="this" tagName="p"}}
          {{name}}
        {{/view}}
      {{/each}}
    </div> 

      {{#view App.ArtistView}}
       <div id="right">
        <h3>{{controller.selectedResult.name}}</h3>
          <div>
            {{#if controller.selectedResult.avatar}}
            <img 
            {{bindAttr src="controller.selectedResult.avatar"}} 
            {{bindAttr alt="controller.selectedResult.name"}}>
            {{/if}}
            <div>
              <h4>{{controller.selectedResult.name}}</h4>
              {{controller.selectedResult.bio}}
            </div>
          </div>
        </div>  
      {{/view}}

  </script>

JavaScript

App = Ember.Application.create({
});

App.Artist = Em.Object.extend({
  name: null,
  type: null,
  mbid: null, 
  enid: null,
  avatar: null,
  bio: null
});

App.Song = Em.Object.extend({
  name: null,
  type: null,
  mbid: null
});

App.ApplicationController = Em.ArrayController.extend({
  needs: ['artists'],
  artistsIsChecked: false,
  songsIsChecked: false,
  albumsIsChecked: false  
});

App.ArtistsController = Em.ArrayController.extend({
  selectedResult: null,
  isSearching: false,

  search: function(query) {
    console.log("searching...");
    var self = this;
    this.set('isSearching', true);

    var c = $.getJSON(
     "http://developer.echonest.com/api/v4/artist/search?api_key=HQKUQMIPY2RSRUSV2&bucket=images&bucket=biographies&bucket=id:musicbrainz",
     { name: query });

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

    for (var i = 0; i < entries.length; i++) {
      var entry = entries[i];
      if (entry.images && entry.images.length > 0) console.log(entry.images[0].url);
        results.push(App.Artist.create({
          name: entry.name,
          type: 'artist',
          mbid: (entry.foreign_ids && entry.foreign_ids.length > 0) ? entry.foreign_ids[0].foreign_id : null, 
          enid: entry.id,
          avatar: (entry.images && entry.images.length > 0) ? entry.images[0].url : null,
          bio: (entry.biographies && entry.biographies.length > 0) ? entry.biographies[0].text : null
        }));
      }
      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'),
        controller = this.get('targetObject'); // the parent controller
      if (controller.get('artistsIsChecked')){
          controller.get('controllers.artists').search(query);
      }
  }
});

App.ArtistSearchResult = Em.View.extend({
 ...