无法获取optionsValue与依赖下拉列表和Knockout贴图插件一起工作

Question

我是一名数据库开发人员（，有问题），其任务是发出JSON与Knockout.js一起使用以呈现相关列表项目集。我刚刚开始与Knockout合作，所以这可能是我缺少的显而易见的事情。

这里是标记：

<select data-bind="options:data, 
        optionsText:'leadTime', 
        value:leadTimes"> 
</select> 

<!--ko with: leadTimes --> 
    <select data-bind="options:colors, 
         optionsText:'name', 
         optionsValue:'key', 
         value:$root.colorsByLeadTime"> 
    </select> 
<!--/ko--> 

下面是测试数据和代码：

var data = [ 
    { 
     key:"1", 
     leadTime:"Standard", 
     colors:[ 
      { key:"11", name:"Red" }, 
      { key:"12", name:"Orange" }, 
      { key:"13", name:"Yellow" } 
     ] 
    }, 
    { 
     key:"2", 
     leadTime:"Quick", 
     colors:[ 
      { key:"21", name:"Black" }, 
      { key:"22", name:"White" } 
     ] 
    } 
] 

var dataViewModel = ko.mapping.fromJS(data); 

var mainViewModel = { 
    data:dataViewModel, 
    leadTimes:ko.observable(), 
    colorsByLeadTime:ko.observable() 
} 

ko.applyBindings(mainViewModel); 

作为这种手段，它正确地填充所述第二选择列表的属性value。但是，如果我将optionsValue:'key'添加到第一个选择列表中，则该属性的value设置正确，但第二个选择列表呈现为空列表。

我需要的是，option标记的value属性设置为数据中提供的key值，而不管选择列表位于从属列表集合中的哪个位置。我看过很多文章和文档，但这个特定的场景（我认为这很常见）正在逃避我。

这里是与数据，JS，并标记一个以上的jsfiddle给出：http://jsfiddle.net/tnagle/Lyxjt11y/

Answer 1

要真正看到问题，你可以的mainViewModel初始化后添加以下代码。

mainViewModel.leadTimes.subscribe(function(newValue) { 
    console.log(newValue); 
    debugger; 
}); 

在添加optionsValue:'key'之前，上面的行会记录以下输出。

Object {key: function, leadTime: function, colors: function} 

但是在添加optionsValue:'key'后，它会记录下列输出。

"1" 

或

"2" 

失败的原因是因为当你将optionsValue: 'key'的第一选择列表中，您mainViewModel的leadTimes财产之前将包含有属性颜色的对象，现在将设置为一个字符串对象。然后，选择列表未能找到属性leadTimes已更改为字符串对象。

一个使它的工作方式是通过改变这样的：

var data = [ 
 
    { 
 
    key:"1", 
 
    leadTime:"Standard", 
 
    colors:[ 
 
     { key:"11", name:"Red" }, 
 
     { key:"12", name:"Orange" }, 
 
     { key:"13", name:"Yellow" } 
 
    ] 
 
    }, 
 
    { 
 
    key:"2", 
 
    leadTime:"Quick", 
 
    colors:[ 
 
     { key:"21", name:"Black" }, 
 
     { key:"22", name:"White" } 
 
    ] 
 
    } 
 
] 
 

 
var dataViewModel = ko.mapping.fromJS(data); 
 

 
var mainViewModel = new function(){ 
 
    var self = this; 
 
    self.data = dataViewModel; 
 
    self.leadTimes = ko.observable(); 
 
    self.selectedKey = ko.observable(); 
 
    self.selectedKey.subscribe(function(selectedKey){ 
 
\t self.selectedData(ko.utils.arrayFirst(self.data(), function(item) { 
 
     return item.key() == selectedKey; 
 
    })); 
 
    }, self); 
 
    self.colorsByLeadTime = ko.observable(); 
 
    self.selectedData = ko.observable(); 
 
} 
 

 
ko.applyBindings(mainViewModel);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>  
 

 
<select data-bind="options:data, 
 
       optionsText:'leadTime', 
 
       optionsValue:'key', 
 
       value:selectedKey"> 
 
</select> 
 
    
 
<!--ko with: selectedData --> 
 
<select data-bind="options:colors, 
 
        optionsText:'name', 
 
        optionsValue:'key', 
 
        value:$root.colorsByLeadTime"> 
 
</select> 
 
<!--/ko-->