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

3 posts, 1 answers
  1. user1843640
    user1843640 avatar
    8 posts
    Member since:
    Oct 2006

    Posted 06 Dec 2012 Link to this post

    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. Answer
    Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 07 Dec 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. user1843640
    user1843640 avatar
    8 posts
    Member since:
    Oct 2006

    Posted 07 Dec 2012 Link to this post

    Thanks!  that did it.
Back to Top