Question

我正在尝试使用knockoutjs做一个简单的级联组合框。我的第一个组合框绑定到viewmodel中的2个属性：

BusinessLines 作为comboboxoptions的来源

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

每个BusinessLine都有一组Clusters。

第二个combox应该数据绑定到可见的combobox选项源的SelectedBusinessLine.Clusters，以及选定选项的SelectedCluster。

问题是第二个组合框根本没有填充。

JsFiddle中的来源（在JsFiddle中，第一个绑定也不起作用，sirs 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>

更新：

第二个解决方案（没有计算道具）

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

Answer 1

这是一个工作版本：

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

你的小提琴不起作用（根本没有）因为你没有包含Knockout Mapping JS参考（映射插件不是主要的Knockout JS的一部分） - 请参阅左侧栏中的Manage Resources区域。

您将看到我所做的最大改变是使用with绑定仅在选择业务线时呈现群集。另请注意，我必须使用$ root.SelectedCluster，否则将无法在with创建的选定业务线上下文中找到它。

Knockoutjs简单的级联选择

1 个答案: