Knockoutjs简单级联选择 [英] Knockoutjs simple cascading selects

问题描述

我正在尝试使用基因敲除js做一个简单的级联组合框.我的第一个组合框绑定到viewmodel中的2个属性:

BusinessLines 作为组合框选项的来源

SelectedBusinessLine 作为第一个组合框中的选定项目.

每个BusinessLine都有一个集群集合.

第二个combox数据应绑定到SelectedBusinessLine.对于组合框选项源，可观察到的簇，对于所选选项，则是SelectedCluster.

问题在于第二个组合框根本没有填充.

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>

更新:

第二个解决方案(不计算道具)

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

解决方案

以下是有效版本:

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

您的小提琴根本没有用，因为您没有包括Knockout Mapping JS参考(映射插件不在主要Knockout JS的一部分中)-请参阅左侧栏中的管理资源"区域.

您将看到我所做的最大更改是使用with绑定，仅在选择了业务线后才渲染群集.还要注意，我必须使用$ root.SelectedCluster，否则将无法在with创建的Selected Business Line上下文中找到它.

I'm trying to do a simple cascading combobox using knockoutjs. My first combobox binds to 2 properties in the viewmodel:

BusinessLines as the source for comboboxoptions

SelectedBusinessLine as the selected item in the first combobox.

Each BusinessLine has a collection of Clusters.

The second combox should data bind to the SelectedBusinessLine.Clusters observable for combobox options source, and SelectedCluster for the selected option.

The problems is that the second combobox doesn't get populated at all.

Source in JsFiddle (In JsFiddle the first binding doesn't work either, sry firs time use)

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>

Update:

Second solution (without computed props)

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

解决方案

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.

这篇关于Knockoutjs简单级联选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！