Knockout.js foreach 错误

Question

TLDR：Knockout 在 foreach 上下文中不理解 options 中的绑定。

我有以下 HTML：

<!-- ko foreach: getModelData(123).Filters.Products.ORDER -->
        <div class="row Filter">
            <div class="col-7">
                <select required data-bind="options: $root.getModelData(123).DataSets.Products_ORDER,
                optionsText: $root.getModelData(123).DataSets.Products_ORDER.Text,
                optionsValue: $root.getModelData(123).DataSets.Products_ORDER.Field,
                value: Field"></select>
            </div>
            <div class="col-3">    
                <select required data-bind="value: Order"> 
                        <option value="" disabled selected>Choose...</option>
                        <option value="ASC">Ascending</option>
                        <option value="DESC">Descending</option>
                </select>    
            </div>
            <div class="col-2">
                <a href=""><img src="images/CmdDelete.svg" alt="remove" width="20" height="20"></a>
            </div>
        </div>
<!-- /ko -->

现在，getModelData(123) 是 viewModel 中的一个自定义函数，它绑定到整个事物。它基本上返回 viewModel 的一个子集。 伴随这个结构的数据是这样的：

{
Filters: {
  Products: {
    ORDER: [],
    WHERE: [],
    LIMIT: [],
    },
  someMoreDatasets...
},
DataSets:{
  Products: { /* some data, irrelevant for this */}
  Products_ORDER: [
    {Field: "value", Text: "Option 1"},
    {Field: "valu2", Text: "Option 2"}
    ]
  }
}

免责声明：这都是手工输入的，因此可能存在一些“文本错误”，但它们很可能不是我在页面上出现错误的原因，因为它都是从数据库中提取的。

想法是：

有一个按钮可让您向数据“添加更多过滤器”。 每当按下此按钮时，一个看起来像{Filter: "", Order: ""} 的新对象被推送到位于此处的可观察数组：Filters.Products.ORDER，该数组应包含有关客户端选择的过滤器的信息。同时，此 HTML 中的 select 绑定到位于此处的数组：DataSets.Products_ORDER 从中提取有关可能的选择选项的信息。

由于 foreach 绑定，这会为您的过滤创建一组新的 HTML 标记。它创建一个过滤器，如下所示。此过滤器是通过按下按钮创建的，因此 foreach 绑定有效。

这个下拉框甚至填充了正确数量的对象（尽管它们的显示不像预期的那样，所以这是 issue#1）这让我相信options 的选择是正确的，但是为什么深入 1 级时相同的语法不能正确显示，我不知道。

issue#2 出现在 binding 的 Field 值中，当问题#1 得到解决时，它可能会自动修复。当add new filter 被按下时。淘汰赛会引发如下错误：

此绑定位于 foreach 循环中的同一 select 元素上，并且假定引用正在执行循环的元素。但是由于某种原因，整个对象都没有被看到，或者它不在上下文中。

有什么想法吗？

编辑：所以是的，通常......整天都在烦我，我一发布就发现了问题（至少部分）。 Field 绑定的东西是固定的。假设是Filter，因为用于绑定 foreach 的数据集确实有一个Field，而是一个Filter。 [Object object] 问题仍然存在，想法？

Answer 1

这应该是您的选项绑定：

<select required data-bind="options: $root.getModelData(123).DataSets.Products_ORDER,
            optionsText: 'Text',
            optionsValue: 'Field',
            value: Filter"></select>