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

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注释，您至少会看到，它们foreach工作正常。

我使用无容器控制流语法，因为在我的实际项目中，<span>此示例中的HTML比简单的要多得多，并且我不想重复。

淘汰赛v2.3.0

Answer 1

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

您需要做的是重复通用内容：

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