0

所以我有一个模板，用于对一些可能有子元素的对象进行递归。我已经让 if 语句按照我想要的方式工作（我认为）。但是，只有在 if 语句之前有一个额外的 li 时，我的子元素才会出现。

这是我的模板

<script type="text/html" id="journalTemplate">
<li data-bind="text: Description">
    <div>
    <li data-bind = "visible: IsGroup"></li>
    <!-- ko if: IsGroup -->
    <ol data-bind="template: {name: 'journalTemplate', foreach: ChildEntities}">
    </ol>
    <!-- /ko -->
    </div>
</li>

我正在使用数组映射，因此没有要显示的真实视图模型，但 C# 对象非常简单：它有一个描述、一个布尔 IsGroup 和一个 ChildEntities 列表（如果 IsGroup 为假，则为 null，作为侧面笔记）。如果我没有空的 li，if 语句的注释块甚至不会出现。

有任何想法吗？

4

1 回答 1

1

好的，我看到了问题。问题是您的 LI 上的文本绑定。

html 中的文本由 textNode dom 元素表示，尽管它们不能在 html 标记中显式编写，但它们的行为方式相同。实际上，您的文本绑定正在用它拥有的任何文本替换 LI 的 innerHtml。

我不太清楚的是为什么你额外的无效 LI 元素会停止对 innerHtml 的完全替换......

无论如何，正确的解决方案是像这样构建您的模板。

<script type="text/html" id="journalTemplate">
    <li>
        <span data-bind="text: Description"></span>
        <!-- ko if: IsGroup -->
        <ol data-bind="template: {name: 'journalTemplate', 
                  foreach: ChildEntities}">
        </ol>
        <!-- /ko -->
    </li>
</script>

http://jsfiddle.net/madcapnmckay/F2vSW/1/

希望这可以帮助。

于 2012-05-22T18:37:26.397 回答