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

我使用的是无容器控制流语法，因为在我的实际项目中，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。

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

1 个答案: