0

knockoutjs を使用して単純なカスケード コンボボックスを作成しようとしています。私の最初のコンボボックスは、viewmodel の 2 つのプロパティにバインドします。

コンボボックス オプションのソースとしてのBusinessLines

最初のコンボボックスで選択された項目としてSelectedBusinessLine 。

各 BusinessLine には、クラスターのコレクションがあります。

2 番目のコンボボックスは、コンボボックス オプション ソースの SelectedBusinessLine.Clusters オブザーバブルと、選択されたオプションの SelectedCluster にデータ バインドする必要があります。

問題は、2 番目のコンボボックスがまったく読み込まれないことです。

JsFiddleのソース(JsFiddle では、最初のバインディングも機能しません。初めて使用します)

JavaScript

 var mainViewModel = null;

    $(document).ready(function() {

        var mainViewModelData = <%= JsonConvert.SerializeObject(NewRequestViewModel) %>;

        mainViewModel = ko.mapping.fromJS(mainViewModelData);

        ko.applyBindings(mainViewModel);

    });

HTML

<div>
    <table>
        <tr>
            <td>
                Business Line
            </td>
            <td>
                <select data-bind="options: BusinessLines,
                                   optionsText: 'Title',
                                   value: SelectedBusinessLine,
                                   optionsCaption: 'Select Business Line..'">
                </select>
            </td>
        </tr>
        <tr>
            <td>
                Cluster
            </td>
            <td>
                <select data-bind="options: SelectedBusinessLine.Clusters,
                                   optionsText: 'Title',
                                   value: SelectedCluster,
                                   optionsCaption: 'Select Cluster..'">
                </select>
            </td>
        </tr> 
    </table>
</div>

更新：

2 番目のソリューション(計算された小道具なし)

<select data-bind="options: SelectedBusinessLine() ? SelectedBusinessLine().Clusters() : [],
                                   optionsText: 'Title',
                                   value: SelectedCluster,
                                   optionsCaption: 'Select Cluster..'">
                </select>
4

1 に答える 1

1

Here is a working version:

http://jsfiddle.net/x2qMg/4/

Your fiddle wasn't working (at all) because you did not include the Knockout Mapping JS reference (the mapping plugin in not part of the main Knockout JS) - see the Manage Resources area in the left side bar.

You'll see the biggest change I made was to use a with binding to only render Clusters when a Business Line has been selected. Also note that I had to use $root.SelectedCluster as otherwise it would not be found within the Selected Business Line context created by the with.

于 2012-07-08T21:17:21.647 に答える