KO Template

by ZenMaster

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0rc.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<input type="text" data-bind="hasFocus: isFocused, value: value">
<ul data-bind="visible: isFocused">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.is-hidden {
    display: none;
}

li {
    height: 40px;
    line-height: 40px;
    background: #ccc;
    border: 1px solid #aaa;
}

JavaScript

var observable = {
    value: ko.observable()
};

observable.isFocused = ko.computed({
    read: function(value) {
        console.log(arguments);
    },
    write: function(value) {
        console.log(arguments);
    }
});

ko.applyBindings(observable);

$('ul').on('click', 'li', function(event) {
    observable.value($(event.target).html());
});