KendoUI MVVM Extend existing widget

A custom Kendo widget with external custom events. Allows for kendo's MVVM framework binding with event and value binding.

by cn172

HTML

<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css">
<div id="modelBound">
Input 1: <input data-role="lookupautocomplete" data-bind="source: acValues, value: simpleValue, events: { lookupclick: onSomeButtonClick }" /><br />  
</div>
<div id="eventsData" />

JavaScript

(function ($) {
    // shorten references to variables. this is better for uglification
    var kendo = window.kendo,
        ui = kendo.ui,
        Widget = ui.Widget,
        CHANGE = "change",
        LOOKUPCLICK = "lookupclick",
        ns = ".kendoLookupAutoComplete";

    var LookupAutoComplete = kendo.ui.AutoComplete.extend({
        // initialization code goes here
        // Simple wrapper around autocomplete
        init: function (element, options) {
            var scoped = this;
            var opt = scoped.options;
            ui.AutoComplete.fn.init.call(this, element, options);
            scoped._modify();
        },
        options: {
            name: 'LookupAutoComplete',
            iconclass: "k-i-search"
        },
        events: [LOOKUPCLICK],
        _modify: function () {
            // cache a reference to this
            var scoped = this;

            // setup the icon
            var template = kendo.template(scoped._templates.icon);
            scoped.icon = $(template(scoped.options));

            // setup the textbox
            template = kendo.template(scoped._templates.textbox);
            scoped.textbox = $(template(scoped.options));
            //Setup a click event on the icon and point it to the external event trigger
            //Create the event with a proxy and use (this) as the scope
            scoped.icon.on("click", $.proxy(scoped._lookupclick, scoped));

            // append all elements to the DOM
            scoped.element.attr("name", scoped.options.name);
            scoped.element.addClass("k-input");
            //scoped.element.css("width", "100%");
            scoped.element.wrap(scoped.textbox);
            scoped.element.after(scoped.icon);
        },
        //Convenience method to set the value of the control externally
        //Useful for event handlers in dependent methods to be able to
        //set the control's value and have it propogate to the MVVM subscribers
        set: function (value)...