Question

TLDR：当它处于foreach语境中时，Knockout无法理解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"}
    ]
  }
}

免责声明：这是所有手动输入的，因此可能存在一些“文本错误”，但它们很可能不是我在页面上出错的原因，因为它全部来自数据库。

IDEA是：

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

由于foreach绑定，这为您的过滤创建了一组新的HTML标记。它创建了一个如下所示的过滤器。此按钮是按下按钮创建的，因此foreach绑定可以正常工作。

此下拉框甚至由正确数量的对象填充（虽然它们的显示不符合预期，因此这是问题＃1 ），这使我相信它的绑定语法选择上的options是正确的，但是为什么相同的语法在深入1级时不能正确显示，我不知道。

问题＃2 位于binding值的Field，当问题＃1解决时，该值可能会自动修复。按下add new filter时。淘汰赛引发的错误如下：

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

有什么想法吗？

编辑：所以通常......一整天都在困扰我，我发布后就发现了问题（至少部分）。 Field绑定事情是固定的。假设是Filter，因为用于绑定foreach doenst的数据集具有Field而是Filter。问题仍然存在[Object object]问题吗？

Answer 1

这应该是你的选择绑定：

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

Knockout.js预告错误

IDEA是：

1 个答案: