Knockout Binding for KendoUI ComboBox

Knockout Binding for KendoUI ComboBox

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/jquery.tmpl.js"></script>
<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/knockout-latest.debug.js"></script>
 <div id="example" class="k-content">            <div class="configuration">                <span class="configHead">Configuration</span>                <span class="configTitle">API Functions</span>                <ul class="options">                    <li>                        <input type="text" value="0" id="selectIndex"/> <button class="selectItem k-button">Select</button>                    </li>                    <li>                        <button class="toggleItem k-button">Enable/Disable</button>                    </li>                    <li>                        <button class="triggerItem k-button">Expand/Collapse</button>                    </li>                    <li>                        <button class="removeItem k-button">Remove</button>                    </li>                    <li>                        <input type="text" value="Item" id="appendText"/> <button class="appendItem k-button">Append</button>                    </li>                    <li>                        <input type="text" value="Item" id="beforeText"/> <button class="beforeItem k-button">Insert Before</button>                    </li>                    <li>                        <input type="text" value="Item" id="afterText"/> <button class="afterItem k-button">Insert After</button>                    </li>                </ul>            </div>            <ul id="panelbar">                <li class="k-state-active">                    First Item                    <ul>                        <li>Sub Item...

JavaScript

function onExpand(e) {
                    alert('expand');
                }
$(document).ready(function() {
    var getItem = function(target) {
        var itemIndexes = target.val().split(/[.,]/),
            rootItem = panelBar.element.children("li").eq(itemIndexes[0]);
        return itemIndexes.length > 1 ? rootItem.find(".k-group > .k-item").eq(itemIndexes[1]) : rootItem;
    },
        select = function(e) {
            if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) panelBar.select(getItem($("#selectIndex")));
        },
        append = function(e) {
            if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) panelBar.append({
                text: $("#appendText").val()
            }, panelBar.select());
        },
        before = function(e) {
            if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) panelBar.insertBefore({
                text: $("#beforeText").val()
            }, panelBar.select());
        },
        after = function(e) {
            if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) panelBar.insertAfter({
                text: $("#afterText").val()
            }, panelBar.select());
        };
    $(".selectItem").click(select);
    $("#selectIndex").keypress(select);
    $(".appendItem").click(append);
    $("#appendText").keypress(append);
    $(".beforeItem").click(before);
    $("#beforeText").keypress(before);
    $(".afterItem").click(after);
    $("#afterText").keypress(after);
    $(".toggleItem").click(function(e) {
        var item = panelBar.select();
        panelBar.enable(item, item.hasClass("k-state-disabled"));
    });
    $(".triggerItem").click(function(e) {
        var item = panelBar.select();
        if (item.hasClass("k-state-active")) {
            panelBar.collapse(item);
        } else {
            panelBar.expand(item);
        }
    });
    $(".removeItem").click(function(e) {
        panelBar.remove(panelBar.select());
    });
});
var panelBar =...