admin管理员组文章数量:1327945
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.
/
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);
});
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/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);
});
Share
Improve this question
edited Aug 14, 2013 at 17:37
jdavid
asked Aug 10, 2013 at 2:21
jdavidjdavid
7519 silver badges16 bronze badges
1
- 1 Did you have any luck with my solution? – ryan Commented Aug 14, 2013 at 15:16
1 Answer
Reset to default 7 +100DataSource 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
本文标签: javascriptKendoHow do you bind MVVM text fields to a remote DataSourceStack Overflow
版权声明:本文标题:javascript - Kendo, How do you bind MVVM text: fields to a remote DataSource? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742223703a2435631.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论