[英]Using Kendo Observable Array, Templates and Data Binding
I have an Kendo datasource configured to retrive JSON data from a remote server. 我将Kendo数据源配置为从远程服务器检索JSON数据。 The response looks something like this: 响应看起来像这样:
[
{
"array":[
{
"moreData":"some string"
},
{
"moreData":"some string"
},
{
"moreData":"some string"
}
],
"moreInfo":"string",
"someMore":22
}
]
and I want to use Kendo Template to build the markup and bind it to the data found inside the observable array. 我想使用Kendo模板来构建标记并将其绑定到可观察数组中找到的数据。 I could not find any documentation or help on Telerik's website to understand how to pull this off (or if it's even possible to pull it off). 我无法在Telerik的网站上找到任何文档或帮助,以了解如何实现此目的(或者甚至有可能实现)。 How do I iterate over the object and bind data to the markup? 如何遍历对象并将数据绑定到标记?
Please look at this fiddle to know what I'm trying to do: http://jsfiddle.net/m2sspoos/3/ 请查看这个小提琴以了解我要做什么: http : //jsfiddle.net/m2sspoos/3/
What's the best way to get this done? 完成这项工作的最佳方法是什么?
I think that there are some misunderstanding on how binding and templates work in KendoUI. 我认为KendoUI中的绑定和模板如何工作存在一些误解。 You are binding to an ObservableObject
but then you pass an argument to a template. 您正在绑定到ObservableObject
但是随后将参数传递给模板。 If you do this, the binding does nothing and you should use in the template something like: 如果执行此操作,则绑定不执行任何操作,因此应在模板中使用类似以下内容的内容:
<script id="template" type="text/x-kendo-template">
More Data: <input value="#= moreData #"/>
</script>
but this will not update the data in your model. 但这不会更新模型中的数据。
I think that what you should do is: 我认为您应该做的是:
Template definition: 模板定义:
<script id="template" type="text/x-kendo-template">
More Data: <input data-bind="value: moreData"/>
</script>
The <div>
element as: <div>
元素为:
<div id="view"
data-role="list-view"
data-bind="source: array"
data-template="template">
</div>
and finally the initialization as: 最后初始化为:
var viewModel = kendo.observable({
"array": [
{ "moreData":"some string 1" },
{ "moreData":"some string 2" },
{ "moreData":"some string 3" }
],
"moreInfo":"string",
"someMore":22
});
kendo.bind($("#view"), viewModel);
Your JSFiddle modified here: http://jsfiddle.net/OnaBai/m2sspoos/5/ 您的JSFiddle在这里修改: http : //jsfiddle.net/OnaBai/m2sspoos/5/
And a runnable code snippet: 还有一个可运行的代码段:
var viewModel = kendo.observable({ "array": [ { "moreData":"some string 1" }, { "moreData":"some string 2" }, { "moreData":"some string 3" } ], "moreInfo":"string", "someMore":22 }); kendo.bind($("#view"), viewModel);
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" /> <script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script> <script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script> <script id="template" type="text/x-kendo-template"> <div> More Data: <input data-bind="value: moreData" /> </div> </script> <div id="view" data-role="list-view" data-bind="source: array" data-template="template"> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.