knockout weird binding issue in if statement

Question

here's a weird on that I can't seem to find any reference too after trawling the internet for some time.

i'm using knockout to bind a list of images to a view / edit control.

here i have my original attempt

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

the above code adds a tag in if we in view mode then adds controls in if in edit mode and in both situations it will include in img tag. oddly the img src binding doesn't work. but if i do the following it does

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

all i have done here is more the img tag to the top outside the if/endif if/endif and it binds fine. To resolve this i have resorted to

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

which i guess is less code, but its repeated code. and i'm now curious to why my first attempt didn't work.

badsyntax badsyntax · Accepted Answer · 2013-09-13T08:28:24

I would guess knockout traverses the DOM thus the comments need to be in the same level in the DOM tree for knockout to match opening and closing comments.

The following nodes mean that the end comment is in a different level in the DOM to the start comment:

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

Here's the DOM tree for that markup:

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

..and thus knockout cannot find the closing comment tag.

There's nothing wrong with your last code example in my opinion. You can use templates to reduce code duplication though if this is your concern.

knockout weird binding issue in if statement

1 Answers