2

OK、私はノックアウト初心者です。本当に単純な問題を理解するのに苦労しています。ノックアウトobservableArrayに関連付けられたドロップダウンリストがあります。また、別の observableArray に関連付けられた質問のリストもあります。質問は、ドロップダウンで選択した値に基づいて非表示/表示する必要があります。

フィドルを見る前に、以下をお読みください。
「EnvId() === 1」を機能させるためにハードコーディングしました。「1」を「CurrentEnviron()」のようなものに置き換えるために、あらゆる種類の関数と ko.computed (「question」と「viewModel」の両方) を試しましたが、フィドルから削除しました。誰かの答えに影響を与えたい。OK、ここにフィドルがあります。

本当に似ているが、答えを使用できないほど十分に異なっている他の多くの質問を見つけました。実際に重複があり、間違った検索用語を使用して見つけられなかった場合は申し訳ありません.

4

2 に答える 2

3

valueそのオプション バインディングを利用できるようにするには、どの項目が選択されているかをマークするバインディングも適用する必要があります。次に、questions配列を、選択した値に基づいてフィルター処理された質問の配列を返す計算されたオブザーバブルにすることができます。

Environment Type: <select id="qEnv" data-bind="value: selectedEnvironment, options: envTypes, optionsCaption: 'Select...', optionsValue: 'envId', optionsText: 'envName'"></select>

また、作成したマップされた配列で監視可能な配列を初期化してください。あなたがしたようにそれらを置き換えないでください。(ただし、この場合、配列は変更されていないので問題ありませんでした)

function viewModel() {
    var self = this;

    // initialize the array with the mapped array
    self.envTypes = ko.observableArray(ko.utils.arrayMap(environments, function(item) {
        return {
            envName: item.Text,
            envId: item.EnvId
        };
    }));

    // this tracks our selected environment value
    self.selectedEnvironment = ko.observable();

    // return a filtered array where the items match the selected environment
    self.questions = ko.computed(function () {
        return ko.utils.arrayFilter(quests, function (item) {
            return item.EnvId == self.selectedEnvironment();
        });
    });
}

質問配列が空であるかどうかに基づいて質問またはメッセージを表示したい場合があるため、テストを調整する必要があります。

data-bind="if: questions().length"

環境のEnvId値が重複していたので、それらを更新し、optionsCaption効果を追加するためにバインディングを追加しました。

更新されたフィドル

于 2012-09-20T16:07:46.923 に答える
1

誰かが興味を持っている場合は、マッピング プラグインを使用して要約します。元のフィドルのエラーも修正しました。

http://jsfiddle.net/jgerstorff/bxBKq/25/

于 2012-09-21T01:01:21.990 に答える