ComboBox - autobind:false and MVVM

by krustev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.3.1324/js/kendo.all.min.js"></script>
<div id="storeInfo">
    <input id="gradeCombo" data-role="combobox" data-bind="source: source.list, comboboxValue: source.gradeValue, comboboxText: source.gradeText" />
  <input id="gradeCombo2" data-role="combobox" data-bind="source: source.list" />
</div>

JavaScript

$(function(){
    var kendoViewModel = kendo.observable({
        source: {
            gradeValue: "A",
            gradeText: "Best",
            list: [
                { "label": "Best", "id": "A" },
                { "label": "Best1", "id": "B1" },
                { "label": "Best2", "id": "B2" }
            ]
        }
    });

    $('#gradeCombo').kendoComboBox({
        dataTextField: 'label',
        dataValueField: 'id',
        autoBind: false
    });
  
   $('#gradeCombo2').kendoComboBox({
        dataTextField: 'label',
        dataValueField: 'id',
        autoBind: false
    });

    //custom binding for value
    kendo.data.binders.widget.comboboxValue = kendo.data.Binder.extend({
        init: function(widget, bindings, options) {
            //call the base constructor
            kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);

            this.widget = widget;
            this._change = $.proxy(this.change, this);
            this.widget.bind("change", this._change);
        },
        change: function() {
            this.bindings.comboboxValue.set(this.widget.value());
        },
        refresh: function() {
            var widget = this.widget,
                value = this.bindings.comboboxValue.get();

            if (widget.dataSource.view()[0]) {
                widget.value(value);
            } else {
                //TODO: get the real data Item here and set the text and value manually
                widget.element.val(value);
            }
        },
        destroy: function() {
            this.widget.unbind("change", this._change);
        }
    });

    //custom binding for text
    kendo.data.binders.widget.comboboxText = kendo.data.Binder.extend({
        init: function(widget, bindings, options) {
            //call the base constructor
            kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);

            this.widget = widget;
            this._change =...