Detect Kendo UI Value-Binding Errors

Question

For the sake of quick regression testing, I am looking for a way to ensure, all the KendoUI stuff has been configured and initialized correctly.

I face a problem when I can't detect a situation when value-binding path does not really exist on the model, i.e. in the following example:

• source-binding to non-existing property data-bind="source: AnotherNonExistingProp" throws an error Uncaught TypeError: Cannot read property 'parent' of undefined (so I can detect it in console)
• However, value-binding to non-existing property data-bind='value: Details.NonExistingProp' does not throw any error - therefore I can't ensure there's no regression in my views.

HTML:

    <form>
    <div>
        <label>Name<label>
        <input data-bind='value: Name' type='text' />
    </div>
    <div>
        <label>Age<label>
        <input data-bind='value: Details.NonExistingProp' type='text' />
    </div>
        <table border='1px' data-template="row-template" data-bind="source: anotherNonExistingProp">
        </table>
    </form>

JavaScript:

<script type='text/javascript'>
    $(function () {    
    var carModel = kendo.observable({
        Name: 'CarName',
        Details: {
            Age: 25
        },
        Parts: [{PartName:'aa'},
               {PartName:'bb'}]
    });
        kendo.bind($('form'), carModel);    
    })
</script>

Is there a way to detect a situation when value-binding uses a non-existing path (i.e. when property, targeted by the path is not defined)?

Here is a live jsFiddle example

Answer 1

You can always bind to the change event on the observable and check the object for the property...

viewModel.bind("change", function(e) {
  if (this[e.field] === undefined) {
    console.error("The field " + e.field + " cannot be bound because it doesn't exist");
  }
});

If you want to get all of your observables at once, you can grab the root observable object and bind quickly to the change.

DISCLAIMER: MVVM is a finely tuned machine. If you intercept it's function and do checking like this, you're likely to slow it down. This is also not something that is going to be supported formally by the Kendo UI team. Your milage may vary.

kendo.observable = function(object) {
  if (!(object instanceof kendo.data.ObservableObject)) {
    object = new kendo.data.ObservableObject(object);
    // add a get binding on all observables
    object.bind("get", function(e) {
      if (this[e.field] === undefined) {
        console.error("Cannot bind to the field '" + e.field + "' because it does not exist");
      }
    });
  }

  return object;
};

http://jsbin.com/amOSejUy/1/edit

Answer 2

I used a slight variation on the above code (@Burke Holland) to work with nested objects:

    kendo.observable = function (object) {
        if (!(object instanceof kendo.data.ObservableObject)) {
            object = new kendo.data.ObservableObject(object);
            // add a get binding on all observables
            object.bind("get", function (e) {
                var splitFields = e.field.split('.');
                var nestObj = this;
                for (var i = 0; i < splitFields.length; i++) {
                    nestObj = nestObj[splitFields[i]];        
                }
                if (nestObj === undefined) {
                    console.error("Cannot bind to the field '" + e.field + "' because it does not exist");
                }
            });
        }

        return object;
    };