knockout.js - knockout 无容器控制流语法不执行数据绑定(bind)

Question

我正在尝试使用 Knockout 的无容器控制流语法，但运气不佳。嗯，实际的控制流是有效的，但是子 HTML 元素没有被绑定(bind)。

我有一个简单的对象:

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工作正常。

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

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