Question

这是一个奇怪的事情，在拖网上一段时间之后我似乎找不到任何参考。

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

这里我有我最初的尝试

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

我认为代码较少，但重复代码。我现在很好奇为什么我的第一次尝试不起作用。

Answer 1

我猜想淘汰赛遍历DOM，因此评论需要在DOM树的同一级别进行淘汰，以匹配开始和结束评论。

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

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

这是该标记的DOM树：

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

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

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

在if语句中淘汰奇怪的绑定问题

1 个答案: