Knockoutjs 简单的级联选择答案

【问题标题】：Knockoutjs simple cascading selectsKnockoutjs 简单的级联选择
【发布时间】：2012-07-08 20:53:15
【问题描述】：

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

BusinessLines 作为组合框选项的来源

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

每个业务线都有一个集群集合。

第二个组合框应数据绑定到 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>

【问题讨论】：

标签： knockout.js cascadingdropdown

【解决方案1】：

这是一个工作版本：

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

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

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

【讨论】：

非常感谢。如果我想让集群组合框始终可见但没有元素，如果选择了任何内容，那么 BuisnessLines 组合框（第一）我应该改变什么？
在这种情况下，您将不得不使用计算的 observable。计算的属性依赖于 SelectedBusinessLine，因此每当该属性更改时，Knockout 都会重新计算可用的集群。像这样的东西：jsfiddle.net/x2qMg/6
很好，谢谢。我认为，如果您可以将直接绑定设置为“SelectedBusinessLine.Clusters”，这样会更干净
如果您没有选择业务线，则 SelectedBusinessLine.Clusters 不存在。你会得到 JavaScript 错误。这就是为什么我的第一个示例使用 with 绑定做了它所做的事情，以便仅在设置 SelectedBusinessLine 时才呈现辅助选择。通过使用计算属性，如果未设置 SelectedBusinessLine，我可以通过返回一个空数组来解决此问题。
好的，但是当绑定有js错误时，绑定应该静默失败，选择业务线的那一刻，绑定应该重新评估并成功。我很好奇我是否可以使用自定义绑定来实现这一点，两者都像“with”但没有隐藏..