如何在KnockOutJS

Question

如何在KnockOutJS中为动态创建的元素设置id。如你所见，我有两个跨度，一个用于按钮，第二个用于按钮一角的小图标（见下图）。所有这些共计6个元素。现在我不知道如何用css管理，因为他们没有唯一的ID。
该怎么办？

[![enter image description here][1]][1]

<script id="normal" type="text/html">
    <div class="ItemIndicateur">
        <span class="BuIndicateur" data-bind="text: $parent.CatFullName() == true ? CatNom : CatNomOnglet, click: $parent.ClickedItem, attr: { id : IdCat}" style="display:block; color: white; padding:10px" />
        <span class="NbDemandeDiv" data-bind="text: NbDemandeIndicateur,visible: IsNbDemandeIndicateur, attr: { id : $parent.IdNbDemande()}"></span>
    </div>
</script>

<div class="ListeIndicateur" data-bind="template: {name: GetItemTemplate, foreach: ListeIndicateur},">

Answer 1

使用knockout提供的css绑定。

http://knockoutjs.com/documentation/css-binding.html

1. 在CSS中创建一个具有所需样式的类。根据您的需要，您可能需要多个

2. 当元素符合条件时，通过绑定

应用css类

[！[在此处输入图像说明] [1]] [1]

<script id="normal" type="text/html">
    <div class="ItemIndicateur">
        <span class="BuIndicateur" data-bind="text: $parent.CatFullName() == true ? CatNom : CatNomOnglet, click: $parent.ClickedItem, attr: { id : IdCat}" style="display:block; color: white; padding:10px" />
        <span class="NbDemandeDiv" data-bind="text: NbDemandeIndicateur,visible: IsNbDemandeIndicateur, attr: { id : $parent.IdNbDemande()}, css: {'color1': NbDemandeIndicateur < 3, 'color2': NbDemandeIndicateur < 10}"></span>
    </div>
</script>