CODEWITHSUNDEEP
javascriptjqueryhtmlknockout.js
Alex McManns
Alex McManns

Reputation: 267

How to set an id to elements created on the fly in KnockOutJS

How to set an id to elements created on the fly in KnockOutJS. As you see I have two spans, one for the button, second one for the small icon on the corner of button(see image below). And all this for total of 6 elements. Now I dont know how to manage with css, cuz they have no unique ID.
What to do?

[![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},">

enter image description here

Upvotes: 1

Views: 496

Answers (1)

QBM5
QBM5

Reputation: 2788

Use the css binding provided by knockout.

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

  1. Create a class in your CSS to that has the styles you want. You may need more than one depending on your needs

  2. When an element meets a criteria apply the css class via the binding

[![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()}, css: {'color1': NbDemandeIndicateur < 3, 'color2': NbDemandeIndicateur < 10}"></span>
    </div>
</script>

Upvotes: 1

Related Questions