在 if 语句中剔除奇怪的绑定问题答案

【问题标题】：knockout weird binding issue in if statement在 if 语句中剔除奇怪的绑定问题
【发布时间】：2013-09-13 07:58:53
【问题描述】：

在网上搜索了一段时间后，我似乎也找不到任何参考资料。

我正在使用敲除将图像列表绑定到视图/编辑控件。

这是我最初的尝试

    <!-- ko if: Position() == 'gal' -->
    <div class="editor-image">
        <!-- ko if: $parent.mode() == 'view' -->
        <a title="" class="view-image" data-bind="attr: { href : imagePath }">
        <!-- /ko -->

        <img data-bind="attr: { src : imageThumbnail }" />

        <!-- ko if: $parent.mode() == 'view' -->
        </a>
        <!-- /ko -->

        <!-- ko if: $parent.mode() == 'edit' -->
        <div>
            <a style="display: none;" class="ui-icon ui-icon-zoomin" title="View larger image" href="#">View larger</a>
            <a style="display: none;" class="ui-icon ui-icon-zoomout" title="View smaller image" href="#">View Smaller</a>
            <a class="ui-icon ui-icon-refresh" title="Delete this image" href="#">Delete image</a>
        </div>
        <!-- /ko -->
    </div>
    <!-- /ko -->

上面的代码在查看模式下添加了一个标签，然后在编辑模式下添加了控件，在这两种情况下，它都会包含在img标签中。奇怪的是 img src 绑定不起作用。但是如果我执行以下操作，它会这样做

    <!-- ko if: Position() == 'gal' -->
    <div class="editor-image">
        <img data-bind="attr: { src : imageThumbnail }" />

        <!-- ko if: $parent.mode() == 'view' -->
        <a title="" class="view-image" data-bind="attr: { href : imagePath }">
        <!-- /ko -->

        <!-- ko if: $parent.mode() == 'view' -->
        </a>
        <!-- /ko -->

        <!-- ko if: $parent.mode() == 'edit' -->
        <div>
            <a style="display: none;" class="ui-icon ui-icon-zoomin" title="View larger image" href="#">View larger</a>
            <a style="display: none;" class="ui-icon ui-icon-zoomout" title="View smaller image" href="#">View Smaller</a>
            <a class="ui-icon ui-icon-refresh" title="Delete this image" href="#">Delete image</a>
        </div>
        <!-- /ko -->
    </div>
    <!-- /ko -->

我在这里所做的只是将 img 标签放在 if/endif if/endif 之外的顶部，并且绑定得很好。为了解决这个问题，我采取了

    <!-- ko if: Position() == 'gal' -->
    <div class="editor-image">
        <!-- ko if: $parent.mode() == 'view' -->
        <a title="" class="view-image" data-bind="attr: { href : imagePath }">
            <img data-bind="attr: { src : imageThumbnail }" />
        </a>
        <!-- /ko -->

        <!-- ko if: $parent.mode() == 'edit' -->
        <img data-bind="attr: { src : imageThumbnail }" />
        <div>
            <a style="display: none;" class="ui-icon ui-icon-zoomin" title="View larger image" href="#">View larger</a>
            <a style="display: none;" class="ui-icon ui-icon-zoomout" title="View smaller image" href="#">View Smaller</a>
            <a class="ui-icon ui-icon-refresh" title="Delete this image" href="#">Delete image</a>
        </div>
        <!-- /ko -->
    </div>
    <!-- /ko -->

我猜这是更少的代码，但它的重复代码。我现在很好奇为什么我的第一次尝试没有成功。

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

我猜淘汰赛会遍历 DOM，因此 cmets 需要在 DOM 树中处于同一级别才能淘汰赛以匹配打开和关闭 cmets。

以下节点表示结束注释在 DOM 中与开始注释处于不同级别：

<a href="#"><!-- comment 1 --></a><!-- end comment 1 -->

这是该标记的 DOM 树：

|-- A
|---- COMMENT
|-- COMMENT

..因此淘汰赛找不到结束评论标签。

在我看来，您的上一个代码示例没有任何问题。您可以使用templates 来减少代码重复，但如果这是您关心的问题。

【讨论】：