knockout.js - 第二个下拉列表根本没有约束力

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>

请参阅此小提琴以进行演示。