How to connect datasource to oberservable object

[Kent]

I have a couple of <div>'s that are bound to an observable object. Now I want that object to be bound to the datasource so that when the datasource reads data it automatically updates the bound fields. How do I do it? In other words, I call the web service with dataSource.read() and get the data back....OK, now what?


HTML:

<div id="view">

    Sites Monitored: <div data-bind="html: sitesMonitored" ></div><br/>

    Sites Failing: <div data-bind="html: sitesFailing" ></div>

</div>

var viewModel = kendo.observable({

    sitesMonitored: 0,

    sitesFailing: 0

});

var dataSource = new kendo.data.DataSource({

    transport: {

        read: "/Dashboard/Stats",

        type: "get"

    }

});

The JSON returned by the web service call:

{"SitesMonitored":35,"SitesFailing":4}

[Alexander Valchev]

Hi Kent,

Thank you for contacting us.

If I understood correctly you would like to only display the values from the DataSource - html and text bindings are used for displaying data. In that case there is no need to use MVVM. A much more simple solution would be to hook up to the change event of the DataSource and render a template with the loaded data.

change: function () {
    var template = kendo.template($("#tmp").html());
    $("#view").html(kendo.render(template, this.view()));
}

In this way the template will update every time when you call the web service with dataSource.read()

For your convenience I prepared a small example: http://jsbin.com/ikexur/3/edit
I hope this will help.

Regards,
Alexander Valchev
the Telerik team