Unique ids in knockout.js templates

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

by Himanshu Joshi

HTML

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

JavaScript

ko.bindingHandlers.uniqueId = {
    init: function(element, valueAccessor) {
        var value = valueAccessor();
        value.id = value.id || ko.bindingHandlers.uniqueId.prefix + (++ko.bindingHandlers.uniqueId.counter);

        element.id = value.id;
    },
    counter: 0,
    prefix: "unique"
};

ko.bindingHandlers.uniqueFor = {
    init: function(element, valueAccessor) {
        var value = valueAccessor();
        value.id = value.id || ko.bindingHandlers.uniqueId.prefix + (++ko.bindingHandlers.uniqueId.counter);
        
        element.setAttribute("for", value.id);
    } 
};

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

ko.applyBindings(viewModel);