MobX - 配列内の単一項目を選択し、他の項目はすべて選択解除しますか？

Question

私は次の観測可能な配列の検索エンジンを持っています。

@observable favoriteSearchEngine = [ 
    { 'provider' : 'google', 'selected': true }, 
    { 'provider' : 'yahoo', 'selected': false }, 
    { 'provider' : 'bing', 'selected': false }, 
]; 

ユーザーはUIからの時間で選択1にできるはずです。

@action onClickFavoriteSearchEngine = (provider) => { 
    alert(provider); // yahoo shows here 
    // How to do this step, only selected provider true and falsify all others in the array? 
} 

Answer 1

@mweststrateによって与えられた解決策は素晴らしい作品が、あなたはも）transactionあるactionを（使用しているので、以前選択したものを選択解除して、新しいものを選択することができます。

@action onClickFavoriteSearchEngine = (provider) => { 
    alert(provider); // yahoo shows here 

    favoriteSearchEngine.forEach(e => e.selected = false); 
    favoriteSearchEngine.find(e => e.provider === provider).selected = true; 
} 

Answer 2

私は、単一の観測可能表す選択を導入し、選択された状態を導き出すでしょう：だから彼らは例えばyahooを選択した場合、ヤフーはselected: trueと、他のプロバイダーになるだろうselected: false

このアクションは、クリックを処理になるだろう

@observable selection = null 
@observable favoriteSearchEngine = [ 
    { 'provider' : 'google', 'selected': function() { 
     return selection === this 
    } 
] 

あなたは今、選択範囲に数回、別のエンジンを割り当てた場合、あなたはエンジンのselected状態が応じて更新することがわかります。それから、 ly

（N.B. ）thisの問題を避けるために、このようなプレーンなオブジェクト+派生を宣言する場合は、矢印の機能を使用していない