Cerrar automáticamente las etiquetas <a> dentro del comentario Knockout

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>

En mi opinión, estoy usando comentarios eliminatorios para determinar qué etiqueta se debe mostrar.Cuando veo la página, cualquier etiqueta que se muestre se cierra dentro del mismo bloque de comentarios.¿Alguien ha experimentado esto antes?¿Existe una mejor manera de hacer esto?

Gracias

Answer 1

Los elementos virtuales deben anidarse correctamente, al igual que los elementos reales.

Puede utilizar enlaces condicionales para agregar el class atributo y click evento:

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