Запустите приложение и используйте выбранное значение в connectOutlet

Question

У меня возникла проблема с инициализацией приложения. Я создаю jsfiddle, который просто работает на моем рабочем столе, но не на jsfiddle.

http://jsfiddle.net/zDSnm/

Я надеюсь, что вы поймете идею.

В начале моего приложения я должен получить некоторые значения из остальных и значения в Ember.Select. Зависит от того, что выбрано, все мои функции connectOutlets используют это значение.

Здесь я получаю некоторые данные от 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);
  }
})

и поместите его в мой выбор:

{{view Ember.Select
contentBinding="App.Contributor.allContributors"
selectionBinding="App.Contributor.selectedContributor"
    optionLabelPath="content.login"
optionValuePath="content.id" }} 
{{outlet}}

И в каждом из моих маршрутов мне нужно использовать это значение, которое выбрано в этом поле выбора

index : Ember.Route.extend({
    route: '/',
    connectOutlets: function(router){
        router.get('applicationController').connectOutlet('oneContributor',App.Contributor.selectedContributor);
    }
})

Я бы также добавил наблюдателя к этому значению selectedContributor, которое вызывает connectOutlets of currentState (я знаю, что не должен этого делать, но я не знаю, почему и как я должен делать это правильно)

App.Contributor.reopenClass({
    //...
refresh : function(){
    App.router.currentState.connectOutlets(App.router);
}.observes('selectedContributor'), 
    //...

Я надеюсь, что есть хороший способ решить эту проблему. Если что-то неясно, пожалуйста, оставьте комментарий.

Answer 1

Если я правильно понимаю, вы хотите показать текущий выбранный участник. Один из способов сделать это - прослушать изменения в выбранном вкладчике и отправить transitionTo действие к роутеру.

Сначала роутер:

   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');
           }
        })
    })

с шаблоном для App.ContributorsView:

{{view Ember.Select
  contentBinding="controller"
  selectionBinding="controller.selectedContributor"
  optionLabelPath="content.login"
  optionValuePath="content.id"}} 

{{outlet}}

и ArrayController управлять вкладчиками:

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')
});

---

Пользователь a выбирает участника, а contributorsController указывает маршрутизатору показать представление участника (т. Е. Показать представление). App.ContributorView с контекстом selectedContributor).

App.ContributorView = Ember.View.extend({
  templateName: 'contributor'
});

Контроллер для выбранного участника:

App.ContributorController = Ember.ObjectController.extend({
  // define events and data manipulation methods
  // specific to the currently selected contributor.
});

Надеюсь это поможет.

---

ОБНОВЛЕНИЕ: Если вам нужно показать первую запись по умолчанию, noneSelected Маршрут должен выглядеть так:

        noneSelected: Ember.Route.extend({
           route: '/',
           connectOutlets: function(router){
             var context = router.contributorsController.get('content.firstRecord');
             router.applicationController.connectOutlet({name: 'contributor', context: context})
           }
        })

И определите firstRecord в ContributorsController:

App.ContributorsController = Ember.ArrayController.extend({
  firstRecord: function() {
    return this.get('content') && this.get('content').objectAt(0)
  }.property('content.[]')
});

Не проверял, но это должно работать.