MVVM databinding inside Kendo ListView template

In my listview template I want to use some databound elements. For example I have next template:

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

when I bound data to form this listview shows rows with empty textboxes without data for each row in phones source and no tooltips.

But if I start editing some row by (for example) next code:

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

Then edited row works perfectly.

So my question is - Is this possible to use MVVM data binding inside "view" list view templates in this case?

Solution

There is no binding called "val" hence the problem. There should even be an exception thrown. The following should work though:

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

Here is a live demo: http://trykendoui.telerik.com/@korchev/IGIJ