如果模板内的绑定现在不显示，则淘汰赛可观察值具有什么价值？

Question

我有一个简单的模板，里面有一个 if 绑定：

<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>

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

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

如果表达式计算结果为真（没有用户名）我想输出"No username added"。然而，如果我不输入用户名，则 addPersonUsername() 变量未定义（通过 console.log 检查），但不会输出此文本。

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

Answer 1

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

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

此外，您的 HTML 结构不正确。当您在 td 上应用 text 绑定时，它会替换 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.

如果模板内的绑定现在不显示，则淘汰赛可观察值具有什么价值？

Knockout if binding inside a template does not show now matter what value the observable holds?

javascript

data-binding

knockout.js