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

Question

我正在尝试使用 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>

http://jsfiddle.net/mxmS9/

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

删除 ko cmets，您至少会看到 foreach 工作正常。

我使用的是无容器控制流语法，因为在我的实际项目中，HTML 比这个例子中简单的<span> 多很多，我不想重复。

淘汰赛 v2.3.0

Answer 1

您不能以这种方式使用无容器控制流语法，因为您无法将 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>

演示JSFiddle.