"ラジオボタン"タイプの機能を作成しようとするEmberjs

Question

ユーザーがモデルをクリックすると、isActive:trueと設定し、その他のモデルはすべてisActive:falseに設定します。

私は2つのコンポーネントと、これを達成しようとするルートを持っています。私は最終的にルート

全て distro-item S

// components/distro-holder 
export default Ember.Component.extend({ 
    sortedDistros: Ember.computed.sort('distros', 'sortDefinition'), 
    sortDefinition: ['sortOrder:acs'], 

    distros: computed('sortedDistros.@each.isActive', function() { 
    console.log("triggered"); 
    }), 

    actions: { 
    toggleActive(distro) { 
     this.sendAction('toggleActive', distro); 
    } 
    } 

}); 

を保持するホルダー成分を有する単一のモデル項目

//components/distro-item 
export default Component.extend({ 
    classNames: 'column is-2', 
    tagName: 'div', 
    isActive: false, 

    actions: { 
    toggleActive (distro) { 
     this.sendAction('toggleActive', distro); 
    } 
    } 

}); 

あるdistro-itemを有する上部から開始

//route/new 
export default Route.extend(AuthenticatedRouteMixin, { 

    selectedDistro: undefined, 

    model() { 
    return RSVP.hash({ 
     distros: get(this, 'store').findAll('distro'), 
    }); 
    }, 

    setupController(controller, models) { 
    controller.setProperties(models); 
    }, 

    actions: { 
    toggleActive(distro) { 
     this.set('selectedDistro', distro); 
    }, 
    } 

}); 

私は3つのもののどれがプロセスの各部分を担当します。最初の考えは、各ディストリビューションがどの州にあるべきかを把握し、それをルートに戻すことをディストリビューターが担うべきであるということです。しかし、私が何を試しても、計算されたプロパティをトリガーすることはできません。これはルート上にあるべきか、それとも他の場所にあるべきですか？

documentation exampleはディストリビューターに相当します。 isActiveの状態を変更すると、それは私の期待どおりに発火しません。

何か助けていただければ幸いです。

Answer 1

ディストリビューターの計算されたプロパティの代わりにselectedDistroプロパティを設定し、それを各ディストリビュートアイテムに渡します。次に、各ディストリビューションは、データがselectedDistroの場合はの状態をtrueに設定し、そうでない場合はfalseに設定します（個々の無線機がその無線グループの値を認識する方法と同様です）。ディストリビューション・アイテム成分で

、ディストリビューション・アイテムがクリックされたとき、それはtoggleActive作用を介してディストリビューション・ホルダにそのデータを送信する：

actions: { 
    toggleActive(distro) { 
    this.sendAction('toggleActive', distro); // goes up to distro-holder 
    }, 
}, 

ディストリビューション・ホルダー部品は、このデータとの組を受信しますselectedDistroプロパティ：

selectedDistro: null, 

actions: { 
    toggleActive(distro) { 
    this.set('selectedDistro', distro); 
    this.sendAction('setName', distro); // goes up to the controller 
    } 
} 

ディストリビューション・アイテム成分はselectedDistroを聞くそのselected計算性質を有し、そして唯一のD、を意味する（trueまたはfalseに、自身のために、selectedを設定します項目istro）任意の時点で選択されるであろう。

selected: Ember.computed('selectedDistro', function() { 
    return this.get('selectedDistro.name') === this.get('distro.name'); 
}), 

コントローラにまでさらにデータを取って実証するために、ディストリビューション・ホルダは、コントローラが受信して実行setNameアクションを送信：

selectedDistro: null, 

actions: { 
    setName(distro) { 
    this.set('selectedDistro', distro.name); 
    } 
} 

認識されない場合、この方法ではEmberのData Down, Actions Upの規則を使用します。データ（および使用するアクション）を各コンポーネントに渡してから、アクションをバックアップして（データ付きで）送信することは、最初は分かりやすく、理解するのが難しい場合があります。

説明するためにEmber Twiddle exampleを作成しました。