Knockout.js Knockoutjs简单级联选择

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

业务线作为comboboxoptions的来源

选择BusinessLine作为第一个组合框中的选定项

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

第二个combox应将数据绑定到SelectedBusinessLine.Clusters，combobox选项源可见，SelectedCluster为所选选项可见

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

Source in（在JSFIDLE中，第一个绑定也不起作用，sry优先使用）

JavaScript

 var mainViewModel = null;

    $(document).ready(function() {

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

        mainViewModel = ko.mapping.fromJS(mainViewModelData);

        ko.applyBindings(mainViewModel);

    });

var mainViewModel=null；
$（文档）.ready（函数（）{
var mainViewModelData=；
mainViewModel=ko.mapping.fromJS（mainViewModelData）；
ko.应用绑定（mainViewModel）；
});

HTML

业务线
簇

更新：

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

---

以下是一个工作版本：

你的提琴根本不起作用，因为你没有包括敲除映射JS参考（主敲除JS中没有映射插件）——请参阅左侧栏中的管理资源区域

---

您将看到，我所做的最大更改是，在选择业务线时，使用带有的绑定仅渲染集群。还要注意，我必须使用$root.SelectedCluster，否则它将无法在由

和
创建的选定业务线上下文中找到。非常感谢。如果我想让集群组合框始终可见，但如果未选择任何元素，那么BuisnessLines组合框xbox（首先）应该更改什么？在这种情况下，您必须使用计算的可观测值。computed属性依赖于SelectedBusinessLine，因此每当属性更改时，Knockout都将重新计算可用集群。像这样的：很好，谢谢。我想如果你能直接绑定到“SelectedBusinessLine.Clusters，因此当SelectedBusinessLine更改时，kncokout也会重新创建群集。”。。我想我更习惯WPF绑定系统如果您没有选择业务线，那么选择BusinessLine.Clusters不存在。您将得到JavaScript错误。这就是为什么我的第一个示例会这样做，使用带
绑定的
，以便只有在设置SelectedBusinessLine时才会呈现次要选择。通过使用computed属性，如果未设置SelectedBusinessLine，我将返回一个空数组来解决这个问题。好的，但是当绑定出现js错误时，绑定应该以静默方式失败，当选择业务线时，绑定应该重新评估并成功。我很好奇是否可以通过自定义绑定实现这一点，比如“with”，但不隐藏。。
<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>