Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I can't reply to the selected answer, but I have an enhanced version of the code that supports multiple unique ids per input value. It's on my blog at <a href="http://drewp.quickwitretort.com/2012/09/18/0" rel="nofollow">http://drewp.quickwitretort.com/2012/09/18/0</a> and repeated here:</p> <pre><code>ko.bindingHandlers.uniqueId = { /* data-bind="uniqueId: $data" to stick a new id on $data and use it as the html id of the element. data-which="foo" (optional) adds foo to the id, to separate it from other ids made from this same $data. */ counter: 0, _ensureId: function (value, element) { if (value.id === undefined) { value.id = "elem" + (++ko.bindingHandlers.uniqueId.counter); } var id = value.id, which = element.getAttribute("data-which"); if (which) { id += "-" + which; } return id; }, init: function(element, valueAccessor) { var value = valueAccessor(); element.id = ko.bindingHandlers.uniqueId._ensureId(value, element); }, }; ko.bindingHandlers.uniqueFor = { /* data-bind="uniqueFor: $data" works like uniqueId above, and adds a for="the-new-id" attr to this element. data-which="foo" (optional) works like it does with uniqueId. */ init: function(element, valueAccessor) { element.setAttribute( "for", ko.bindingHandlers.uniqueId._ensureId(valueAccessor(), element)); } }; </code></pre> <p>Now you can have multiple labeled checkboxes for one record with automatic ids:</p> <pre><code>&lt;li data-bind="foreach: channel"&gt; &lt;input type="checkbox" data-which="mute" data-bind="uniqueId: $data, checked: mute"&gt;  &lt;label data-which="mute" data-bind="uniqueFor: $data"&gt;Mute&lt;/label&gt; &lt;input type="checkbox" data-which="solo" data-bind="uniqueId: $data, checked: solo"&gt;  &lt;label data-which="solo" data-bind="uniqueFor: $data"&gt;Solo&lt;/label&gt; &lt;/li&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload