-1

私はノックアウトとMVCに不慣れです。ノックアウトとマルチプルサイトから多くのドキュメントを調べようとしましたが、すべてをまとめることができないようです。これが私が持っているものです：私は私のAPIから戻ってくるjsonデータを持っています：

[{
ID: 1,
LongName: "My Long Name",
ShortName: "Long",
Rank: 10
},
{
ID: 2,
LongName: "My second long name",
ShortName: "Short",
Rank: 20
}]

私のjavascriptで私は持っています：

<script type="text/javascript">
    $(function () {
        $.getJSON("../api/myData", function (data) {
            alert(data[0].ID);
        });
    });
</script>

jsonデータ（longnameとid）から入力されるドロップダウンメニューを作成したいと思います。ユーザーが選択すると、選択に基づいて別のメニューが動的に入力されます。また、ノックアウトマッパースクリプトを使用しますか？助けてください。ありがとう

4

1 に答える 1

1

これはあなたを助けるかもしれないサンプルフィドルです。

http://jsfiddle.net/jearles/LpwgQ/

UI はOptions、AJAX 呼び出しを介してドロップダウンをロードすることから始まります。ロードされたら、サブオプションのロードをトリガーするオプションの 1 つを選択できます。オプション 1 を選択すると、1 セットのサブ オプションがロードされ、オプション 2 に切り替えると、別のサブ オプション セットがロードされます。最初のオプションを「デフォルト」に戻すと、2 番目のメニューが表示されなくなります。

私のコードでは、mappingプラグインを利用しています。これにより、返された JSON を observable および observableArray に変換する作業が非常に簡単になります。それを使用するかどうかは、要件次第です。

--

HTML

<select data-bind="options: options, optionsText: 'LongName', optionsValue: 'ID', value: selectedOption, optionsCaption: '-Select-'"></select>

Knockout バインディングを使用して、返されたオプションを選択にマップします。詳細については、オプションのバインドを参照してください。 options選択肢の配列を指しoptionsText、テキストとして使用するプロパティを Knockout に指示しoptionsValue、値valueを設定します。オプションが選択されたときに Knockout が設定するオブザーバブルであり、optionsCaption選択が行われていないときにテキストを提供します。

サブスクライブするselectedOptionことで、変更されたときに反応し、必要に応じて別の AJAX 呼び出しを行ってサブ オプションを読み込むことができます。

JS

self.selectedOption.subscribe(function(newValue) {
    // Reset the suboptions
    self.suboptions([]);

    // If we have selected an option go get the suboptions
    if (newValue) {
      ...
    }
});
于 2012-11-09T01:37:57.577 に答える