Kendo, How do you bind MVVM text: fields to a remote DataSource?

html, javascript, kendo-ui, single-page-application

Solution

DataSource expects to operate on a collection of records. I'm sure you can get around that with parse or schema but for this example I changed the mock ajax call to return an array.

$.mockjax({
    url: "js/data/person.json",
    contentType: "application/json",
    responseText: [{
        firstName: 'James',
        lastName: 'Taylor'
    }]
});

The first problem is that you setup the datasource but never populate the data. I added a call to `.read()`

personSource.read();

As I changed the responseText to an array, I updated your bindings similar to this:

data-bind="text: dataSource.view()[0].firstName"

Lastly, here's an updated fiddle

Problem

I have an example of this working for local values defined in the viewmodel (observable) class constructor, but it does not seem to work when you have a remote datasource. http://jsfiddle.net/hbuNP/7/ How could I get an example similar to the one below working for remote datasources, is it even possible? ``` <div id='root'> <label>Remote Name: </label> <span data-bind="text: firstName"><!--firstName--></span>, <span data-bind="text: lastName"><!--lastName--></span> <div> <label>Remote Name: <input data-bind="value: firstName" />, <input data-bind="value: lastName" /> </label> </div> </div> <br/> <br/> <div id='local-root'> <label>Local Name: </label> <span data-bind="text: firstName"></span>, <span data-bind="text: lastName"></span> <div> <label>Local Name: <input data-bind="value: firstName" />, <input data-bind="value: lastName" /> </label> </div> </div> <br/> <br/> <div id='test-ajax'> <pre> </pre> </div> ``` ``` $(document).ready(function(){ /** * #local-root example, binds to local data like in the examples */ var personLocalViewModel = kendo.observable({ firstName: 'James', lastName: 'Taylor' }); kendo.bind($('#local-root'), personLocalViewModel); /** * set's up a mock api endpoint for jquery and other libraries */ $.mockjax({ url: "js/data/person.json", contentType: "application/json", responseText: { firstName: 'James', lastName: 'Taylor' } }); /** * test-ajax - proves mockajax works */ $.ajax({ url: "js/data/person.json", dataType:'json', success:function(response){ $('#test-ajax pre').text(JSON.stringify(response)); } }); /** * #root or remote-root, this dataSource is not bidning to the html, why? */ console.log('KENDO.js', kendo.data); var personSource = new kendo.data.DataSource({ transport: { read: { url: "js/data/person.json", dataType: "json" } }, schema:{ parse: function(response){ console.log('personSource.schema.parse',response); return response; }, data: function(response){ console.log('personSource.schema.data',response); return response; } } }); //would this work? var personViewModel = kendo.observable({ dataSource: personSource }); //would this work? var personViewModel2 = kendo.observable(personSource); kendo.bind($('#root'), personViewModel); }); ```

Original source