Unique ids in knockout.js templates

http://stackoverflow.com/questions/9233176/unique-ids-in-knockout-js-templates

by rniemeyer

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.0.0.js"></script>
<ul data-bind="foreach: items">
    <li>
        <label data-bind="uniqueFor: 'before'">Before</label>
        <input data-bind="uniqueId: true, value: name" />
        <label data-bind="uniqueFor: 'after'">After</label>
    </li>
</ul>

JavaScript

ko.bindingHandlers.uniqueId = {
    init: function(element) {
        element.id = ko.bindingHandlers.uniqueId.prefix + (++ko.bindingHandlers.uniqueId.counter);
    },
    counter: 0,
    prefix: "unique"
};

ko.bindingHandlers.uniqueFor = {
    init: function(element, valueAccessor) {
        var after = ko.bindingHandlers.uniqueId.counter + (ko.utils.unwrapObservable(valueAccessor()) === "after" ? 0 : 1);
          element.setAttribute("for", ko.bindingHandlers.uniqueId.prefix + after);
    } 
};

var viewModel = {
    items: [
            { name: ko.observable("one") },
            { name: ko.observable("two") },
            { name: ko.observable("three") }
        ]
};

ko.applyBindings(viewModel);