javascript - Knockout.js foreach 错误

Question

TLDR:当在 foreach 上下文中时，Knockout 无法理解 options 中的绑定(bind)。

我有以下 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 中的一个自定义函数，它绑定(bind)到整个事物。它基本上返回 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 绑定(bind)到位于此处的数组:DataSets.Products_ORDER，它从中提取有关可能的选择选项的信息。

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

这个下拉框甚至填充了正确数量的对象(尽管它们的显示不符合预期，所以这是问题#1)，这让我相信选择上的 options 是正确的，但为什么相同的语法在更深一层时无法正确显示，我不知道。

issue#2 位于 Field 值的绑定(bind)中，当问题#1 解决时，该问题可能会自动修复。当按下添加新过滤器时。 knockout 会抛出一个错误，如下所示:

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

有什么想法吗？

编辑:所以是的，通常......一整天都在困扰我，我一发布它就发现了问题(至少部分)。 Field 绑定(bind)问题已修复。应该是一个Filter，因为用于绑定(bind)foreach的数据集没有一个Field，而是一个Filter。不过，[Object object] 问题仍然存在，有什么想法吗？

Answer 1

这应该是您的选项绑定(bind):

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