Kendo MVVM Binding to Self Executing Anonymous Module Function - html

Question

I'm working with the Kendo UI MVVM and I'm trying to bind it to a self executing anonymous modular function. Long story short, it's only kind of working. The module is being updated if I inspect the page but the UI isn't. All I'm using is a short HTML file with a script tag to wire up the MVVM and an external JavaScript file to bring the module in.
HTML and JS on page
<!-- Adding information -->
<input data-bind="value: DemoField" />
<!-- Update Button -->
<button data-bind="events: { click: updateModule }">Update</button>
<!-- Trying to update this field -->
<input data-bind="value: module.Model.Demo.DemoField" />
<!-- Observable -->
<script type="text/javascript">
var model = kendo.observable(
{
DemoField: "",
updateModule: function () {
module.updateInformation({
demoField: this.get("DemoField")
)};
}
},
module
);
kendo.bind($("#form"), invoiceModel);
</script>
Module JS file
var module = (function () {
// private information
var _demo = (function () {
var _demoObject = {},
_demoField = null;
Object.defineProperty(_demoObject, "DemoField", {
get: function () { return _demoField; }
});
_demoObject.updateInformation = function (updatedObject) {
if (updatedObject.demoField) {
_demoField = updatedObject.demoField;
}
};
return _demoObject;
}());
var _model = { Demo: _demo };
// public information
return {
Model: _model
updateInformation: _demo.updateInformation
}
}());
If I enter "module.Model.Fields.FieldName" in the inspector, I see the information I'm expecting, but the UI just isn't playing nice. I've been to many pages on Telerik's website and I've consulted Google, but typically my searches yield little to no results and the results I do get are less than useful.
My thoughts are that kendo won't observe a module like it would a regular property, but then again I haven't worked with any kind of JS module before and I'm very new to MVVM.

Answer 1

Your thoughts are correct. Kendo will not observe a nested property, even if it is not nested you always have to use "get" and "set" words, for reference in Angular you don't need to do that.
So your code should look something like that:
<input data-bind="value: DemoField" />
<!-- Update Button -->
<button data-bind="events: { click: updateModule }">Update</button>
<!-- Trying to update this field -->
<input data-bind="value: updatedValue" />
And the view Model:
var model = kendo.observable({
DemoField: "",
updateModule: function () {
module.updateInformation({
demoField: this.get("DemoField")
});
this.set("updatedValue", module.Model.Demo.DemoField);
},
updatedValue: "",
});
kendo.bind($("#form"), model);
Here is a link to dojo with working example:
http://dojo.telerik.com/UzUhi