Knockout.js - 禁用而不是隐藏的级联选择？答案

【问题标题】：Knockout.js - Disabled, rather than hidden, cascading selects?Knockout.js - 禁用而不是隐藏的级联选择？
【发布时间】：2013-02-08 12:06:22
【问题描述】：

我使用受this question（jsFiddle - 帖子底部的代码）中接受的答案启发的代码，使用 Knockout 创建了多个级联选择。

效果很好，但是我想禁用孩子在不可用时选择，而不是完全隐藏它们。

有一个简单的选择吗？

隐藏行为似乎是由 'with' 绑定驱动的，但这似乎是数组链接方式不可或缺的一部分。

var mainViewModel = null;

var mainViewModelData = {
    "RequestName": "test Name",
    "BusinessLines": [{
        "Id": 1,
        "Title": "Retail",
        "Clusters": [{
            "Id": 1,
            "Title": "Corporate si Trezorerie"},
        {
            "Id": 2,
            "Title": "Good Bee"},
        {
            "Id": 3,
            "Title": "Leasing"}]},
    {
        "Id": 2,
        "Title": "Corporate",
        "Clusters": [{
            "Id": 1,
            "Title": "REM"},
        {
            "Id": 2,
            "Title": "BCR Procesare"},
        {
            "Id": 3,
            "Title": "Erste Asset Management"}]}],
    "SelectedBusinessLine": null,
    "SelectedCluster": null,
    "RequirementHighLevelDescription": null,
    "Revenues": 0,
    "Savings": 0,
    "PreventedLosses": 0
};

mainViewModel = ko.mapping.fromJS(mainViewModelData);

ko.applyBindings(mainViewModel);

<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 data-bind="with: SelectedBusinessLine">
        <td>
            Cluster
        </td>
        <td>              <select data-bind="options: Clusters,                                        optionsText: 'Title',                                                        value: $root.SelectedCluster,                                                        optionsCaption: 'Select Cluster..'">   
            </select>
        </td>
    </tr>
    </table>
</div>

【问题讨论】：

标签： knockout.js cascadingdropdown

【解决方案1】：

这不是那么微不足道但可能......

首先，您将创建计算的 observable，它将每个 BusinessLine 的所有集群与 parent 属性合并，该属性将保留集群的父 BusinessLine 对象：

mainViewModel.AllClusters = ko.computed(function(){
    var result = [];
    ko.utils.arrayForEach(this.BusinessLines(), function(line){
        ko.utils.arrayForEach(line.Clusters(), function(cluster){
            result.push({ parent: line, Title: cluster.Title() });
        });
    });
    return result;
}, mainViewModel);

然后有必要创建新类型的绑定 enabledOptions，它将根据 parent 属性比较结果为每个集群 <option/> 设置/删除“禁用”属性：

ko.bindingHandlers.enabledOptions = {
    update: function(element, valueAccessor, allBindings) {

        var options = element.getElementsByTagName('option'),
            parent = ko.utils.unwrapObservable(valueAccessor()),
            // delta is neccessary to strip select's caption if it exists
            delta = allBindings().optionsCaption ? 1 : 0;

        for (var i = delta; i < options.length; i++) {
            var cluster = mainViewModel.AllClusters()[i - delta];
            cluster.parent == parent
            ? options[i].removeAttribute('disabled')
            : options[i].setAttribute('disabled', 'disabled')
        }

    }
}

最后删除你提到的with绑定。

结果你会得到这样的东西：http://jsfiddle.net/ostgals/x2qMg/28/

【讨论】：

【解决方案2】：

移除with绑定，并将options绑定绑定到SelectedBusinessLine().Clusters。

然后使用disable 绑定来禁用选择。

【讨论】：