如何使用 ko 遍历字符串列表

Question

所以我有以下代码来显示从后端转发的警告消息，不幸的是它没有按预期工作。

<div data-bind="with: report">
     <!-- ko foreach: warnings -->
     <div data-bind="text: warnings[index()]"></div>
     <!-- /ko -->
     ...
</div>

报告是一个 ko.observable 并由对后端的调用填充，当前 returns 一个警告，通知出现问题并防止后端崩溃。

report(ko.toJS(data));

后端的警告是此报告中的一个列表 class，其中包含多个带有对象的列表。由于我没有看到 js 文件中进一步定义的任何其他列表，我希望 warnigns 列表也出现在报告中，但不知何故消息没有显示。任何人都可以指出我所缺少的正确方向吗？

看到带有 foreach 的淘汰赛页面，他们只用对象举例...那么是否有可能甚至有一个简单的字符串数组？

Answer 1

可以使用$data来引用迭代的当前元素：

ko.applyBindings({ arrayOfStrings: [ "hello", "world" ] });

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<ul data-bind="foreach: arrayOfStrings">
  <li data-bind="text: $data"></li>
</ul>

使用$data需要一些特定于敲除的知识。如果您想避免这种情况，我建议您使用扩展的 foreach 绑定：foreach: { data: warnings, as: 'warning' }:

ko.applyBindings({ warnings: [ "careful!", "watch out!" ] });

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<ul data-bind="foreach: { data: warnings, as: 'warning' }">
  <li data-bind="text: warning"></li>
</ul>

您当前尝试无效的原因：foreach 创建了一个新的绑定上下文。 warnings 将不再可直接访问，除非它是当前迭代主题元素的属性。为了让它工作，你必须写 $parent.warnings[$index()]:

ko.applyBindings({ arrayOfStrings: [ "hello", "world" ] });

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<ul data-bind="foreach: arrayOfStrings">
  <li data-bind="text: $parent.arrayOfStrings[$index()]"></li>
</ul>

如何使用 ko 遍历字符串列表

How to iterate over a list of string using ko

knockout.js