This is a migrated thread and some comments may be shown as answers.

Proper way to edit items in a listview when using Kendo UI Mobile & MVVM?

2 Answers 163 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
user1843640
Top achievements
Rank 1
user1843640 asked on 06 Dec 2012, 08:24 PM

What is the proper way to edit items in a listview when using Kendo UI Mobile & MVVM?

I don't get the expected results when using the following:

HTML

<div id="itemsView"
    data-role="view"
    data-model="vm">

    <ul data-role="listview" data-bind="source: items" 
                             data-template="itemsTemplate">
    </ul>
    <script id="itemsTemplate" type="text/x-kendo-template">
    <li>
        #=Name#
    </li>
    </script>

    <input type="text" data-bind="value: newValue" />
    <button data-role="button" data-bind="click: update">update</button>
</div>​

JavaScript

var vm = kendo.observable({
    items: [{
        Name: "Item1"}],
    newValue: '',
    update: function(e) {
        var item = this.get("items")[0];
        item.set("Name", this.get("newValue"));
        //adding the follwoing line makes it work as expected
        kendo.bind($('#itemsView'), vm);
    }
});

kendoApp = new kendo.mobile.Application(document.body, {
transition: "slide"});​

I expect the listview to reflect the change to the Name property of that item. Instead, a new item is added to the listview. Examining the array reveals that there is no additional item, and that the change was made. (re)Binding the view to the view-model updates the list to reflect the change. Re-Binding after a change like this doesn't seem to make any sense.

Here is the jsfiddle: http://jsfiddle.net/5aCYp/2/

Note: This was originally posted on StackOverflow:
http://stackoverflow.com/questions/13739125

2 Answers, 1 is accepted

Sort by
0
Accepted
Petyo
Telerik team
answered on 07 Dec 2012, 11:29 AM
Hi,

You don't need the LI element in the template - it is automatically added by the widget. Check the updated fiddle.

All the best,
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
user1843640
Top achievements
Rank 1
answered on 07 Dec 2012, 03:49 PM
Thanks!  that did it.
Tags
ListView (Mobile)
Asked by
user1843640
Top achievements
Rank 1
Answers by
Petyo
Telerik team
user1843640
Top achievements
Rank 1
Share this question
or