Automatically closing <a> tags within Knockout comment

Question

<!-- ko if: IsNew() === true -->
    <a href="#" class="new" data-bind="click:$root.markRead">
<!-- /ko -->
<!-- ko if: IsNew() === false -->
    <a href="#">
<!-- /ko -->
    <div class="notification-item">
....
    </div>
</a>

I am using knockout comments in my view to determine which tag should be shown. When I view the page, whichever tag gets shown gets closed within the same comment block. Has anyone experienced this before? Is there a better way of doing this?

Thanks

Answer 1

Virtual elements must nest properly, just like real elements.

You can use conditional bindings to add the class attribute and click event:

<a href="#" data-bind="css: {'new': IsNew() }, click: IsNew() ? $root.markRead : null">
<div class="notification-item">
....
</div>
</a>