javascript - 使用 Kendo 可观察数组、模板和数据绑定(bind)

Question

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

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

我想使用 Kendo Template 构建标记并将其绑定(bind)到在可观察数组中找到的数据。我在 Telerik 的网站上找不到任何文档或帮助来了解如何实现这一目标(或者是否有可能实现)。如何遍历对象并将数据绑定(bind)到标记？

请查看这个 fiddle 以了解我正在尝试做什么:http://jsfiddle.net/m2sspoos/3/

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

Answer 1

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

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