基于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

回答

相关问题