0

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

BusinessLines作为组合框选项的来源

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

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

第二个组合框应该数据绑定到 SelectedBusinessLine.Clusters 可观察组合框选项源,以及 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>
4

1 回答 1

1

这是一个工作版本:

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

您的小提琴(根本)不起作用,因为您没有包含 Knockout Mapping JS 参考(映射插件不是主要 Knockout JS 的一部分) - 请参阅左侧栏中的管理资源区域。

您会看到我所做的最大更改是使用with绑定仅在选择了业务线时才呈现集群。另请注意,我必须使用 $root.SelectedCluster 否则它不会在由with.

于 2012-07-08T21:17:21.647 回答