Kendo ListView模板中的MVVM数据绑定

时间:2014-06-10 20:26:27

标签: kendo-ui kendo-mvvm kendo-listview

在我的listview模板中,我想使用一些数据绑定元素。例如,我有下一个模板:

<script type="text/x-kendo-tmpl" id="phoneView">
<div style="width:301px">
   <span style="width:100px" data-role="tooltip" data-position="top" data-bind="val: tooltips.phoneNumber"><input type="text" data-bind="value: number" /></span>
   <span style="width:45px" data-role="tooltip" data-position="top" data-bind="val: tooltips.phoneExt"><input type="text" data-bind="value: ext" /></span>
   <span data-role="tooltip" data-position="top" data-bind="val: tooltips.removePhone"><a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span> Delete</a></span>
</div>
</script>

for listview

<div data-role="listview" id="phones"
   data-template="phoneView"
   data-bind="source: phones"></div>

当我绑定数据以形成此列表时,会显示带有空文本框的行,而不包含电话源中每行的数据,也没有工具提示。

但是,如果我开始编辑某些行(例如)下一个代码:

var listView = $("#phones").data("kendoListView");
listView.edit(listView.element.children().first());

然后编辑的行完美无缺。

所以我的问题是 - 这是否可以在内部使用MVVM数据绑定&#34; view&#34;在这种情况下列出视图模板?

1 个答案:

答案 0 :(得分:2)

没有名为&#34; val&#34;因此问题。甚至应该抛出异常。以下应该可以工作:

  <script type="text/x-kendo-tmpl" id="phoneView">
    <div style="width:301px">
       <span data-role="tooltip" data-filter="input"><input type="text" data-bind="value: number, attr: {title:tooltips.phone}" /></span>
       <span data-role="tooltip" data-filter="input">
       <input  type="text" data-bind="value: ext,attr:{title:tooltips.ext}" />
       </span>
       <a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span> Delete</a>
    </div>
 </script>

这是一个现场演示:http://trykendoui.telerik.com/@korchev/IGIJ