Some simple code to help understand how to use ObservableObjects fast:
<div id="superHero"></div>
<hr/>
<label for="txtFirstName"><input type="text" id="txtFirstName" /></label><br/>
<button id="btnChangeName">Change Name</button>
<hr/>
<div id="result"></div>
<script type="text/javascript">
// Example of creating an ObservableObject
var hero = new kendo.data.ObservableObject({
firstName: ‘Clark’,
lastName: ‘Kent’,
superHero: {
strength: 250,
name: ‘Superman’
}
});
// how to subscribe to the change event
hero.bind("change", function (e) {
alert(‘change event:’ + e.field + ‘ will be changed’);
});
// how to subscribe to the change event
hero.bind("set", function (e) {
if (e.field == ‘firstName’) {
if (!e.value) {
alert(‘set event: must have a value.’);
// this will prevent the update
e.preventDefault();
} else {
// value will contain the new value
alert(‘set event:’ + e.field + ‘ will be changed from ‘ + this.firstName + ‘ to ‘ + e.value);
}
}
});
// how to get a property’s value
console.log(hero.get("firstName"));
$(document).ready(function () {
// how to get value of a nested field
$(‘#superHero’).html(‘<h2>Name: ‘ + hero.get(‘superHero.name’) + ‘</h2>’);
$(‘#result’).html(JSON.stringify(hero.toJSON()));
$(‘#btnChangeName’).click(function () {
var firstName = $(‘#txtFirstName’).val();
hero.set("firstName", firstName);
// how to get JSON value
$(‘#result’).html(JSON.stringify(hero.toJSON()));
});
});
</script>