KendoUI MVVM widget part 4, custom events
A custom Kendo widget with external custom events. Allows for kendo's MVVM framework binding with event and value binding.
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="simplewidget" data-bind="value: simpleValue, events: { buttonclick: onSomeButtonClick }" /><br />
Input 2: <input data-role="simplewidget" data-bind="value: simpleValue, events: { buttonclick: onSomeButtonClick" /><br />
Input 3: <input data-role="simplewidget" data-bind="value: simpleValue2, events: { buttonclick: onSomeButtonClick" /><br />
</div>
<div id="eventsData" />
JavaScript
(function ($) {
var kendo = window.kendo,
ui = kendo.ui,
Widget = ui.Widget,
CHANGE = "change",
BUTTONCLICK = "buttonclick",
BLUR = "blur",
ns = ".kendoSimpleWidget";
var SimpleWidget = Widget.extend({
// Kendo calls this method when a new widget is created
init: function (element, options) {
var that = this;
Widget.fn.init.call(this, element, options);
//Create a blur event handler.
element = that.element
.on(BLUR + ns, $.proxy(that._blur, that));
//Create the DOM elements to build the widget
that._create();
//Set the value from the options.value setting, if it was called with a static value
if (options.value) {
that.value(options.value);
}
},
//List of all options supported and default values
options: {
name: "SimpleWidget",
value: null,
width: "150px;",
iconclass: "k-i-search",
},
//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) {
var that = this;
if (that._old != value) {
//It is different, update the value
that._update(value);
//Capture the new value for future change detection
that._old = value;
// trigger the external change event to notify subscribers
that.trigger(CHANGE);
}
},
//MVVM framework calls 'value' when the viewmodel 'value' binding changes
value: function(value) {
var that = this;
if (value === undefined) {
return that._value;
}
...