如何在嵌套的 foreach 中调用 afterRender 处理函数？

Question

我有 foreach 语句并使用 afterRender 调用该函数。

<div data-bind="foreach: { data: Object.keys(pricings()), as: '_propkey', afterRender: pricingTableRenderedHandler }">

在这次迭代中，_propkey 是一个字符串。然后我不得不将 foreach 语句更改为：

<div data-bind="foreach: { data:  pricings(), as: '_propertykey', afterRender: pricingTableRenderedHandler}">
    <div data-bind="foreach: { data: _propertykey.states, as: '_secondarypropkey'}">

处理函数

  self.pricingTableRenderedHandler = function (data, stateName) {
        var tableSelector = "#" + stateName.states.state.replace(/\s/g, '');

        hideEmptyTableColumns.hide(tableSelector);
        replaceEmptyTableCells.replaceBy(self.emptyCellValue, tableSelector);
  }

对于旧的 foreach，它在 stateName 参数中接收到字符串。现在，它收到一个看起来像这样的对象。

[ 
"cropYear" : "2020"
"states": [
    {
        "state": "Tbilisi",
        "details": {
            "PriceHeaders": [
            
            ],
            "Comment": "TBi",
            "Pricings": [
            ]
        }
    }
    {
        "state": "Texas",
        "details": {
            "PriceHeaders": [
               
            ],
            "Comment": "dasdsa",
            "Pricings": [
            ]
        }
    }
]

]

我只需要取“状态”属性值。我假设我需要在内部 foreach 中调用处理函数，但由于某种原因，我不能。除非它写在第一个foreach中，否则不会被调用。

Answer 1

foreach 绑定为每个元素创建一个新的绑定上下文。如果在传递给 foreach 的模板中，您需要访问原始上下文的属性，您可以使用 $parent.

访问它

<div data-bind="foreach: { 
                  data:  pricings(),
                  as: '_propertykey'
                }">
  <div data-bind="foreach: {
                    data: _propertykey.states,
                    as: '_secondarypropkey'},
                    afterRender: $parent.pricingTableRenderedHandler">
    <!--                         ^^^^^^^^                          -->
  </div>
</div>

请注意，将使用当前元素 ($data) 作为 this 调用该函数。如果您的处理程序依赖于 this，您可以使用 $parent.methodName.bind($parent).

如何在嵌套的 foreach 中调用 afterRender 处理函数？

How to call afterRender handler function in nested foreach?

javascript

razor

knockout.js