1

我有一个配置为从远程服务器检索 JSON 数据的 Kendo 数据源。响应看起来像这样：

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

我想使用 Kendo 模板来构建标记并将其绑定到可观察数组中的数据。我在 Telerik 的网站上找不到任何文档或帮助来了解如何实现这一点（或者是否有可能实现）。如何迭代对象并将数据绑定到标记？

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

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

4

1 回答 1

2

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

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

还有一个可运行的代码片段：

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>

于 2014-12-02T12:22:30.240 回答