基於observableArray構建基於optgroup的挖空SELECT

我使用挖空開發了一個項目。我找到了一種方法讓我的選擇與knockout綁定和optgroup。解決方案如下：http://jsfiddle.net/HPhmB/3/基於observableArray構建基於optgroup的挖空SELECT

不幸的是，此解決方案使用靜態模型在select中填充'選項'&'optgroup'。

爲了我個人的需要，我想要更有活力的東西。我想從一個數據庫提供的可觀察陣列開始。這observableArray看起來是這樣的：

var vehicles = ko.observableArray([ 
    { 
    Id: 1, 
    Brand: "Volkswagen", 
    Type: "Golf" 
    }, 
    { 
    Id: 2, 
    Brand: "Volkswagen", 
    Type: "Sharan" 
    }, 
    { 
    Id: 3, 
    Brand: "BMW", 
    Type: "118i" 
    } 
    { 
    Id: 4, 
    Brand: "BMW", 
    Type: "525D" 
    } 
]);

enter image description here

我的問題：是否有可能在此基礎上單observableArray構建選擇有一個解決方案。也許在計算屬性的幫助下檢索optgroup/options？

謝謝。

來源

2013-04-11 Bronzato

哇 - 我從來沒有意識到這是一個內置功能。當我看到這種風格時，我一直認爲這是一種習慣（儘管有點醜）下拉。現在我想爲它使用它:-) – 2017-11-26 06:34:04

這是執行此操作的方法之一。這是不是最佳的，但效果很好：

var ViewModel = function() { 
    var self = this; 
    self.vehicles = ko.observableArray([{ 
     Id: 1, 
     Brand: "Volkswagen", 
     Type: "Golf" 
    }, { 
     Id: 2, 
     Brand: "Volkswagen", 
     Type: "Sharan" 
    }, { 
     Id: 3, 
     Brand: "BMW", 
     Type: "118i" 
    }, { 
     Id: 2, 
     Brand: "BMW", 
     Type: "525D" 
    }]); 

    self.brands = ko.computed(function(){ 
     var list = ko.utils.arrayMap(self.vehicles(), function(item){ 
      return item.Brand; 
     }); 

     return ko.utils.arrayGetDistinctValues(list); 
    }); 
}; 

ko.applyBindings(new ViewModel()); 

<select data-bind="foreach: brands"> 
    <optgroup data-bind="attr: {label: $data}, foreach: $parent.vehicles"> 
    <!-- ko if: Brand == $parent --> 
     <option data-bind="text: Type"></option> 
    <!-- /ko --> 
    </optgroup> 
</select>

小提琴：http://jsfiddle.net/HPhmB/55/

來源

2013-04-11 12:32:34

非常感謝。你幫了我很多。 – Bronzato 2013-04-11 17:58:45

基於observableArray構建基於optgroup的挖空SELECT

回答

相關問題