Question

我遇到了应用程序初始化的问题。我创建了jsfiddle，它只适用于我的桌面，但不适用于jsfiddle。

我希望你能理解这个想法。

在我的应用开始时，我必须从休息和值中获取一些值到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值，该值调用currentState的connectOutlets（我知道我不应该这样做但我不知道为什么以及如何以正确的方式执行此操作）

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

在ContributorsController中定义firstRecord：

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

没有测试过，但它应该可以工作。

初始化应用程序并使用connectOutlet中的选定值

1 个答案: