第二个下拉列表根本没有约束力

Question

我有两个可观察者：

self.areasAndProfessionsList = ko.observableArray();
self.selectedAreaFromDropList = ko.observable();

我获取Json数据并将其保存到areasAndProfessionsList。接下来是数据结构：

{"Areas":[{"ID":1,"Name":"name", "Professions":[{"ID":1,"Name":"name1"}{"ID":2,"Name":"name2"}...

所以，我在其他数组中有数组。接下来，我制作两个下拉列表。我对它们的绑定看起来像这样：

<select data-bind="options: $root.areasAndProfessionsList, optionsText: function(item) {return item.Name}, value: $root.selectedAreaFromDropList"></select>
<select data-bind="options: $root.selectedAreaFromDropList.Professions, optionsText: 'Name'"></select>

第一个绑定工作正常。它显示了区域的名称。但是，我无法让第二个下拉列表正常工作。我检查过selectedAreaFromDropList不为空，控制台显示没有错误。如何进入要绑定的Name属性？

Answer 1

您绑定到 observable selectedAreaFromDropList，而不是observable中的实际项目。执行observable作为函数以获得所需的效果：

<select data-bind="options: $root.selectedAreaFromDropList().Professions, 
                   optionsText: 'Name'"></select>

请参阅this fiddle了解演示。