Working with Kendo ObservableObjects

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>