淘汰赛无法解析绑定到 foreach 中的函数

【问题标题】：Knockout unable to parse bindings to a function in foreach淘汰赛无法解析绑定到 foreach 中的函数
【发布时间】：2016-10-04 12:45:18
【问题描述】：

我正在使用 Knockout 和 Knockout-REST（它会进行映射并使所有对象都可观察）：

<script> var regosViewModel = new RegosViewModel();</script>

<span data-bind="text: regos().list()[0].rid()"></span>

<table class="table table-striped">
<thead><th>rid</th></thead>

<div data-bind="foreach: regos().list()">
<tr><td data-bind="text: rid()"></td></tr>

<script>ko.applyBindings(regosViewModel);</script>

跨度返回数字 1，但尝试在下面的 foreach 循环中执行相同操作会导致“错误：无法解析绑定。消息：ReferenceError：找不到变量：rid；绑定值：文本：rid()"。

谁能解释为什么？值得注意的是， text: $index 也有同样的绑定错误。

【问题讨论】：

你需要把“data-bind="foreach:regos().list()”放在tr上并删除div：例如：<tr data-bind="foreach: regos().list()><td data-bind="text: rid()"></td></tr>
请出示您的型号代码。

标签： knockout.js

【解决方案1】：

当数据绑定 table 元素时，您必须确保它生成有效的 html。 table 不能直接持有 div。试试这个：

<table class="table table-striped">
  <thead>
    <tr>
      <th>rid</th>
    </tr> 
  </thead>
  <tbody data-bind="foreach: regos().list()">
    <tr>
      <td data-bind="text: rid()"></td>
    </tr>
  </tbody>
</table>

查看这个显示无效表格标记不会呈现的示例：

ko.applyBindings({ arr: [{label: "label 1"}, {label: "label 2"}] });

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<h3>Valid table:</h3>
<table>
  <tbody data-bind="foreach: arr">
    <tr>
      <td data-bind="text: label"></td>
    </tr>
  </tbody>
</table>

<h3>Invalid table</h3>
<table>
  <div data-bind="foreach: arr">
    <tr>
      <td data-bind="text: label"></td>
    </tr>
  </div>
</table>

【讨论】：