javascript - 如果模板内的绑定(bind)现在不显示，则 knockout 可观察值具有什么值(value)？

Question

我有一个简单的模板，里面有一个 if 绑定(bind):

<script type="text/html" id="addPersonTemplate">
   <tr>
    ...
    <td class="large-7" data-bind="text: addPersonUsername"><span class="noSpecificChecks" data-bind="if: addPersonUsername() == false">No username added</span></td>
    ...
   </tr>
</script>

基本上，一个人可以选择输入用户名。当他们在文档中的其他地方单击“添加”时，将输出模板，但是，无论我尝试什么:

我无法让 if: addPersonUsername() == false 正确评估。

如果表达式的计算结果为真(没有用户名)，我想输出“没有添加用户名”。然而，如果我没有输入用户名，则 addPersonUsername() 变量是未定义的(通过 console.log 检查)，但不会输出此文本。

这有什么特别的原因吗？ if 绑定(bind)是否仅在 HTML 页面加载时评估，而不是在模板添加时评估？我看不到任何迹象...

Answer 1

Knockout observables 是函数，因此当它们用于任何表达式(如 addPersonUsername() 中)时，您需要通过调用它们而不带任何参数(例如:if)来获取它们的值绑定(bind):

<span class="noSpecificChecks" data-bind="if: addPersonUsername() == false">

此外，您的 HTML 结构不正确。当您应用 text在 td 上绑定(bind)它取代了 td 的全部内容您与 if 的跨度也是如此.

因此您需要在 td 中应用其他内容喜欢 span (或者如果不需要 span 则使用虚拟元素语法):

<td class="large-7" > 
      <!-- ko if: addPersonUsername --> 
          <span data-bind="text: addPersonUsername"></span>
      <!-- /ko -->
      <span class="noSpecificChecks" data-bind="if: addPersonUsername() == false">No username added
      </span>
</td>

演示 JSFiddle .