在 Knockout foreach 循环中编写 HTML 代码（通过 Razor 调用）

Posted 2023-03-27

【中文标题】在 Knockout foreach 循环中编写 HTML 代码（通过 Razor 调用）

【英文标题】：Composing HTML code (called through Razor) inside Knockout foreach loop

【发布时间】：2019-12-31 18:11:34

【问题描述】：

我现在的情况是：

<fieldset name="sortSearch">
    @html.CreateSortingControl("views.restricted.widgets.alertdetailwidget.sorting", "searchCriteria.Sorting", "changeSortingDirection", "changeSortingField", GetValueList(SortingValueProvider.ValueProviderId))
</fieldset>

实际上，我正在调用一些 CS 代码，这些代码将创建一些带有下拉列表和一些绑定的标记。例如，当在此下拉列表中选择一个值时，将调用函数 changeSortingField。一切正常。

问题是我想将此标记封装在依赖于 observable 的 Knockout foreach 循环中。类似这样的：

<!-- ko foreach: data: FieldSortings, as: 'sortings' -->
    <fieldset name="sortSearch">
        @Html.CreateSortingControl("views.restricted.widgets.alertdetailwidget.sorting", "searchCriteria.Sorting", "changeSortingDirection", "changeSortingField", GetValueList(SortingValueProvider.ValueProviderId))
    </fieldset>
<!-- /ko -->

这意味着当 FieldSortings 增加时，应该会出现新的标记，而且确实会出现。 问题是，有了这个逻辑，我的任何函数都不再被调用，例如当我从下拉列表中选择一个值时，绑定不再起作用。感觉标记只计算一次（我认为）。我应该使用某种特定的组合来动态调用 Razor 函数吗？提前致谢！

编辑：razor 返回的标记是：

 <div class="input-group custom-sort">
<section data-bind="validationElement: searchCriteria.Sorting.Field">
    <label class="select">
        <select data-i18n="[aria-label]accessibility.select.value" class="input-xs select-Sorting-Field" data-bind="value: searchCriteria.Sorting.Field,event: change: changeSortingField">
            <option value="" css="searchcriteria-sorting-field-">&lt;Select Order by&gt;</option>
            <option value="DetectionDate" data-default="true" css="searchcriteria-sorting-field-DetectionDate">Detection date</option>
            <option value="Impact" css="searchcriteria-sorting-field-Impact">Impact</option>
            <option value="Score" css="searchcriteria-sorting-field-Score">Score</option>
        </select>
        <strong class="tooltip tooltip-top-right">
            <i class="fa  txt-color-teal"></i>
            <span data-i18n="views.restricted.widgets.alertdetailwidget.sorting"></span>
        </strong>
    </label>
    <div class="note note-error" style="display: none;" data-bind="validationMessage: searchCriteria.Sorting.Field"></div>
</section>
<label class="input-group-addon" for="sorting-control" data-bind="click: changeSortingDirection">
    <span class="sr-only">Change the sorting direction</span>
    <input type="checkbox" name="sorting-control" id="sorting-control" data-bind="checked: searchCriteria.Sorting.IsDescending">
    <i></i>
</label>

而 FieldSortings 是一个 Observable 数组，定义为：

 self.FieldSortings = ko.observableArray([]);

【问题讨论】：

Razor 是服务器端的。淘汰赛是客户端。如果没有某种形式的 AJAX 请求，Knockout 不能涉及服务器端（因为它是客户端，而 Razor 是服务器端）。当涉及淘汰赛时，Razor 不再涉及。

@mjwills 我不能用绑定编写一次标记，将其存储在客户端的某个模板中，然后在需要时用 KO 调用它吗？

@mjwills 确实存在 Razor 生成的标记并且可以重复，但由于某种原因，绑定在 foreach 循环中不起作用

能否请您包含剃须刀调用 CreateSortingControl 的输出。这将帮助我们诊断绑定问题是什么。还有什么是 FieldSorting 模型。浏览器控制台有错误吗？

【参考方案1】：

发现问题。在 Knockout foreach 循环中，您需要使用 $parent 引用外部变量和函数。由于这个原因，它无法使绑定需要工作。