Init application and use Selected value in connectOutlet

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.