Ember.js - Triggering properties outside of controller - ember.js

Question

I am building a music site where I have multiple songs, each with it's own play/pause button, and then a global player which has a master play/pause button. I cannot figure out how to trigger the computed properties so that when I click the play button on the individual song, the master play/pause button also toggles from play to pause and vice versa.
I have the following code
Tracks.TrackController = Ember.ObjectController.extend({
currentTime: 0,
isLoaded: false,
isPlaying:false,
songStarted:false,
actions: {
play: function(){
var track_id = this.id;
var mySound = soundManager.createSound({
id: track_id,
url: 'https://api.soundcloud.com/tracks/' + track_id + '/stream?client_id=d61f17a08f86bfb1dea28539908bc9bf',
autoplay: false,
whileplaying: function() {
$('#positionBar').css('width', ((this.position/this.duration) * 100) + '%');
},
});
songStarted:true;
this.set("isPlaying", true);
this.set('mySound', mySound);
soundManager.stopAll();
mySound.play();
},
pause: function(){
var mySound = this.get('mySound');
this.set("isPlaying", false);
this.set("isPaused", true);
if(mySound && mySound.pause){
mySound.pause();
}
},
resume: function(){
var mySound = this.get('mySound');
this.set("isPlaying", true);
this.set("isPaused", false);
mySound.resume();
}
}
});
and this as the markup:
{{#if isPlaying}}
<li class="playBtn pause"><button {{action 'pause' this}} class="play-btn sm2_button" id="masterPlayBtn"></button></li>
{{else}}
{{#if isPaused}}
<li class="playBtn"><button {{action 'resume' this}} class="play-btn sm2_button" id="masterPlayBtn"></button></li>
{{else}}
<li class="playBtn"><button {{action 'play' this}} class="play-btn sm2_button" id="masterPlayBtn"></button></li>
{{/if}}
{{/if}}
I assume I need to add actions to the
Tracks.TracksController = Ember.ArrayController.extend({
});
controller, but that is where I get lost. I can't seem to figure out how to set isPlaying to the master play/pause button and also call the actions so that when I click the master pause/play button, it will find a particular song and play that on click.

Answer 1

You need:
A template that wraps the master button and individual songs
A component that will handle individual songs events and state
from here you handle individual song events that propagate upwards
Event bubbling from the components to the template controller
the template controller is notified of component events
here you can update the master control
Handle play/stop messages through binds
Working example: http://emberjs.jsbin.com/dopoho/1/edit?html,js,console,output
I should have used an array controller for the list of songs and I'm sure there are use cases I didn't considered. The point is to show you how you can use components to reuse code and how to pass events from the template to the component and then to the controller.

Answer 2

You don't need to change the actions on the individual play buttons. Only on the global button.
Update TracksController thusly:
Tracks.TracksController = Ember.ArrayController.extend({
restartTrack: null, // Need to restart with the global button? Use my model!
currentTrack: function () {
var filtered = this.get('content').filter(function (track) {
return this.get('isPlaying');
});
if(Ember.isEmpty(filtered)){
return null;
}
var track = filtered.objectAt(0);
this.set('restartTrack', track); // Should be on the item action...
return track;
}.property('#each.isPlaying'),
isPlaying: function () {
return this.get('content').any(function (track) {
return this.get('isPlaying');
});
}.property('#each.isPlaying')
});
So now your TracksController always knows if a song has individually changed, and will change its own isPlaying. It also knows which track to use if you want to restart the song with the global button...
This is just the first step to this and I don't really want to code the whole thing for you. All you really need to do at this point is do a little bit of refactoring in your handlebars and update the action on the global button.
You can also use the currentTrack in some sort of template and it will always re-render whenever you change the track. Pretty cool Ember-tastic stuff.
Good luck!

Answer 3

You could create hierarchy of controller objects like below:
Tracks.BaseTrackController = Ember.ObjectController.extend({...});
Tracks.TrackController = Tracks.BaseTrackController.extend({...});
With that you could place all you play pause functionality in Base controller and toggle them through actions in base itself (or child controller depending on your need)
Hope this makes sense.