javascript - Kendo, How do you bind MVVM text: fields to a remote DataSource? -
i have example of working local values defined in viewmodel (observable) class constructor, not seem work when have remote datasource.
how example similar 1 below working remote datasources, 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 local data in examples */ var personlocalviewmodel = kendo.observable({ firstname: 'james', lastname: 'taylor' }); kendo.bind($('#local-root'), personlocalviewmodel); /** * set's mock api endpoint jquery , 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, datasource not bidning 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 work? var personviewmodel = kendo.observable({ datasource: personsource }); //would work? var personviewmodel2 = kendo.observable(personsource); kendo.bind($('#root'), personviewmodel); });
datasource expects operate on collection of records. i'm sure can around parse or schema example changed mock ajax call return array.
$.mockjax({ url: "js/data/person.json", contenttype: "application/json", responsetext: [{ firstname: 'james', lastname: 'taylor' }] }); the first problem setup datasource never populate data. added call .read()
personsource.read(); as changed responsetext array, updated bindings similar this:
data-bind="text: datasource.view()[0].firstname" lastly, here's updated fiddle
Comments
Post a Comment