0

アプリケーションの初期化で問題が発生しました。jsfiddleを作成します。これは、デスクトップでは機能しますが、jsfiddleでは機能しません。

http://jsfiddle.net/zDSnm/

私はあなたがその考えを理解することを望みます。

初めに、私のアプリケーションでは、restからいくつかの値を取得し、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

私が正しく理解していれば、現在選択されている寄稿者を表示したいと思います。これを行う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.[]')
});

テストはしていませんが、動作するはずです。

于 2012-10-28T16:08:56.920 に答える