Knockout.js 淘汰无容器控制流语法不执行数据绑定

我尝试使用Knockout的无容器控制流语法，但运气不好。好的，实际的控制流正在工作，但是子HTML元素没有被绑定

我有一个简单的目标：

function Person(name, vegetarian) {
    var self = this;
    self.name = name;
    self.vegetarian= vegetarian;
}

我想要一份所有人的名单，如果他们是素食主义者，还需要一个与素食协会的链接

<ul data-bind="foreach: people">
<li>
        <!-- ko if: vegetarian() -->
        <a href="http://www.vegsoc.org">
        <!-- /ko -->
        <span data-bind="text: name"></span>
        <!-- ko if: vegetarian() -->
        </a>
        <!-- /ko -->
    </li>
</ul>

为什么我的两个人没有显示在列表中？

删除ko注释，您至少会看到

foreach

工作正常

我使用无容器控制流语法是因为在我的实际项目中，HTML比本例中简单的

多得多，我不想重复

---

Knockout v2.3.0

您不能以这种方式使用无容器控制流语法，因为您不能用它们分解n元素的打开/关闭标记

您需要做的是重复常见的内容：

<ul data-bind="foreach: people">
    <li>
        <!-- ko if: vegetarian -->
        <a href="http://www.vegsoc.org"><span data-bind="text: name"></span></a>
        <!-- /ko -->
        <!-- ko ifnot: vegetarian -->
            <span data-bind="text: name"></span>
        <!-- /ko -->
    </li>
</ul>

或者，如果您有更多不想重复的内容，请将其移动到模板：

<ul data-bind="foreach: people">
    <li>
        <!-- ko if: vegetarian -->
        <a href="http://www.vegsoc.org" data-bind="template: 'linkTemplate'"></a>
        <!-- /ko -->
        <!-- ko ifnot: vegetarian -->
            <!-- ko template: 'linkTemplate'--><!-- /ko -->
        <!-- /ko -->
    </li>
</ul>
<script type="text/html" id="linkTemplate">
  <span data-bind="text: name"></span>
</script>

---

演示。

作为一名素食者，我可以告诉你，

vegatarian

不是一个

函数

，只是一个

布尔值

。我不想重复常见的内容（你的第一个例子），因为我的内容很复杂。但是你的第二个例子看起来很有希望。