2

次の観測可能な検索エンジンの配列があります。

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

ユーザーは、UI から一度に 1 つだけ選択できる必要があります。yahooたとえば、彼らが選択した場合、yahooは取得selected: trueし、他のプロバイダーは取得しますselected: false

このアクションはクリックを処理します。

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

2 に答える 2

2

@mweststrate によって提供されたソリューションはうまく機能しますが、アクション(トランザクションでもあります) を使用しているため、以前に選択したものを選択解除し、必要に応じて新しいものを選択することができます。

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

  favoriteSearchEngine.forEach(e => e.selected = false);
  favoriteSearchEngine.find(e => e.provider === provider).selected = true;
}
于 2016-08-01T07:12:06.890 に答える
1

選択を表す単一のオブザーバブルを導入し、そこから選択された状態を導き出します。

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

別のエンジンを選択に数回割り当てると、selectedそれに応じてエンジンの状態が更新されることがわかります。

(NB での問題を回避するために、このような単純なオブジェクト + 派生を宣言する場合は、アロー関数を使用しないでくださいthis)

于 2016-08-01T06:11:56.467 に答える