0

我在初始化应用程序时遇到问题。我创建了 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);
    }
})

我还将观察者添加到调用 currentState 的 connectOutlets 的这个 selectedContributor 值（我知道我不应该这样做，但我不知道为什么以及如何正确地这样做）

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

我希望有一些好的方法来解决这样的问题。如果有不清楚的地方请发表评论。

4

1 回答 1

2

如果我理解正确，您想显示当前选择的贡献者。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.[]')
});

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

于 2012-10-28T16:08:56.920 回答