使用 KnockoutJS 在树结构中绑定的正确方法

Question

所以我有以下“目标/目标”结构：

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

锚标记必须在段落中。现在，您可以想象，锚标记被段落内容覆盖。

绑定这些东西的正确方法是什么？

Answer 1

您可以这样做，使用无容器语法来避免额外的 DOM 使您的页面混乱：

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>

您也可以不使用无容器语法，而是使用带有特定 class 的 span，如果您确实需要额外的标记来使用特定 CSS 定位它。