Init application and use Selected value in connectOutlet - ember.js

Question

I got problem with initialization of application.
I create jsfiddle which simply works on my desktop but not on jsfiddle.
http://jsfiddle.net/zDSnm/
I hope you will catch the idea.
On the beginining od my aplication I have to get some values from rest and values to Ember.Select.
Depends on what is choosen all my connectOutlets functions use this value.
Here I get some data from REST
$.ajax({
url: 'https://api.github.com/repos/emberjs/ember.js/contributors',
dataType: 'jsonp',
context: this,
success: function(response){
[{login: 'a'},{login: 'b'}].forEach(function(c){
this.allContributors.addObject(App.Contributor.create(c))
},this);
}
})
and put it to my Select View:
{{view Ember.Select
contentBinding="App.Contributor.allContributors"
selectionBinding="App.Contributor.selectedContributor"
optionLabelPath="content.login"
optionValuePath="content.id" }}
{{outlet}}
And in every of my route I need to use this value, which is selected in this selection box
index : Ember.Route.extend({
route: '/',
connectOutlets: function(router){
router.get('applicationController').connectOutlet('oneContributor',App.Contributor.selectedContributor);
}
})
I'd also add observer to this selectedContributor value which calls connectOutlets of currentState (I know I shouldn't do this but I don't know why and how should I do this in properly way)
App.Contributor.reopenClass({
//...
refresh : function(){
App.router.currentState.connectOutlets(App.router);
}.observes('selectedContributor'),
//...
I hope there is some good way to solve such problem.
If there is something not clear please leave comment.

Answer 1

If I understand correctly you want to show the currently selected contributor. One way to do it is to listen for a change in the selected contributor and send a transitionTo action to the Router.
First the router:
index : Ember.Route.extend({
route: '/',
showContibutor: Ember.Route.transitionTo('show'),
showNoneSelected: Ember.Route.transitionTo('noneSelected'),
connectOutlets: function(router){
router.applicationController.connectOutlet({ name: 'contributors', context: App.Contributor.find() });
},
// if no contributor is selected, the router navigates here
// for example, when a default option "Make a selection" is selected.
noneSelected: Ember.Route.extend({
route: '/'
}),
show: Ember.Route.extend({
route: '/:contributor_id'
connectOutlets: function(router, context){
router.applicationController.connectOutlet({name: 'contributor', context: context})
},
exit: function(router) {
// This will remove the App.ContributorView from the template.
router.applicationController.disconnectOutlet('view');
}
})
})
with a template for App.ContributorsView:
{{view Ember.Select
contentBinding="controller"
selectionBinding="controller.selectedContributor"
optionLabelPath="content.login"
optionValuePath="content.id"}}
{{outlet}}
and an ArrayController to manage contributors:
App.ContributorsController = Ember.ArrayController.extend({
onSelectedContributorChange: function() {
var selectedContributor = this.get('selectedContributor');
if (selectedContributor) {
App.router.send('showContributor', selectedContributor);
} else {
App.router.send('showNoneSelected');
}
}.observes('selectedContributor')
});
The user a selects a contributor and the contributorsController tells the router to show the view for the contributor (i.e, show the view App.ContributorView with context selectedContributor).
App.ContributorView = Ember.View.extend({
templateName: 'contributor'
});
controller for selected contributor:
App.ContributorController = Ember.ObjectController.extend({
// define events and data manipulation methods
// specific to the currently selected contributor.
});
Hope this helps.
UPDATE: If you need to show the first record by default, the noneSelected route should look like this:
noneSelected: Ember.Route.extend({
route: '/',
connectOutlets: function(router){
var context = router.contributorsController.get('content.firstRecord');
router.applicationController.connectOutlet({name: 'contributor', context: context})
}
})
And define firstRecord in ContributorsController:
App.ContributorsController = Ember.ArrayController.extend({
firstRecord: function() {
return this.get('content') && this.get('content').objectAt(0)
}.property('content.[]')
});
Haven't tested it, but it should work.