Richtige Art und Weise mit KnockoutJS in Baumstruktur zu binden

Question

So habe ich folgende „Ziel/Ziel“ -Struktur:

<p data-bind="text: Title" class="commentContent"> 
    <a class="removeComment" data-bind="attr: {'data-commentId':Id}">x</a> 
</p> 

Die Anker-Tag hat im Absatz sein. Nun, wie Sie sich vorstellen können, wird das Anker-Tag durch den Absatz-Inhalt überschrieben.

Was ist der richtige Weg, um solche Sachen zu binden?

Answer 1

Hier ist, wie Sie das tun könnten, die behälterlose Syntax zusätzlichen DOM zu vermeiden, dass Ihre Seite unübersichtlich:

ko.applyBindings({ Title: "My fancy title", Id: 42 });

.commentContent { background: lime; padding: 10px; } 
 
a { color: red; font-weight: bold; background: blue; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> 
 

 
<p class="commentContent"> 
 
    <!-- ko text: Title --><!-- /ko --> 
 
    <a class="removeComment" data-bind="attr: {'data-commentId':Id}">XanchorX</a> 
 
</p>

Sie könnten auch nicht die behälterlose Syntax verwenden, aber ein span verwenden mit eine spezifische class stattdessen, wenn Sie die zusätzliche Markup benötigen, um es mit bestimmten CSS zu zielen.