Question

我有一个Kendo数据源，用于从远程服务器中检索JSON数据。响应看起来像这样：

[  
   {  
      "array":[  
         {  
            "moreData":"some string"
         },
         {  
            "moreData":"some string"
         },
         {  
            "moreData":"some string"
         }
      ],
      "moreInfo":"string",
      "someMore":22
   }
]

我希望使用Kendo Template构建标记并将其绑定到observable数组中的数据。我在Telerik的网站上找不到任何文档或帮助，以了解如何解决此问题（或者甚至可以将其拉下来）。如何迭代对象并将数据绑定到标记？

请看这个小提琴，知道我想做什么：http://jsfiddle.net/m2sspoos/3/

完成这项工作的最佳方法是什么？

Answer 1

我认为在KendoUI中对绑定和模板的工作方式存在一些误解。您绑定到ObservableObject，但随后将参数传递给模板。如果你这样做，绑定什么都不做，你应该在模板中使用类似：

<script id="template" type="text/x-kendo-template">
    More Data: <input value="#= moreData #"/>
</script>

但这不会更新模型中的数据。

我认为你应该做的是：

模板定义：

<script id="template" type="text/x-kendo-template">
    More Data: <input data-bind="value: moreData"/>
</script>

<div>元素：

<div id="view" 
     data-role="list-view" 
     data-bind="source: array" 
     data-template="template">
</div>

最后初始化为：

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);

您的JSFiddle在此修改：http://jsfiddle.net/OnaBai/m2sspoos/5/

一个可运行的代码段：

＆＃13;

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);

＆＃13;

<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>

＆＃13;

使用Kendo Observable Array，Templates和Data Binding

1 个答案: