在使用Kendo UI Mobile和MVVM時，在列表視圖中編輯項目的正確方法是什麼？

Question

使用編輯項目的正確方法是什麼？Kendo UI Mobile & MVVM？

使用下面的時候我沒有得到預期的結果：

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"});​ 

我期望列表視圖，以反映變化該項目的名稱屬性。相反，新項目被添加到列表視圖。檢查數組顯示沒有附加項目，並且發生了更改。 （重新）將視圖綁定到視圖模型會更新列表以反映更改。在這樣的改變之後重新綁定似乎沒有任何意義。

這裏是的jsfiddle： http://jsfiddle.net/5aCYp/2/

Answer 1

該問題是由模板中的<li>引起的。小部件已經提供了<li>，所以額外的<li>弄亂了渲染。這個問題在kendo ui forums

Answer 2

不知道如果我理解你的問題正確：但是這是我做了與劍道的Web UI類似的東西，我希望手機是不是從網絡界面，因此不同API透視圖。

$element.kendoListView({ 
     dataSource: list, 
     template: idt, 
     editTemplate: iet, 
     autoBind: true 
    }); 

我綁定listview的方式是不同的，但我想你也可以用你的方法得到類似的結果。

我將兩個模板傳遞給列表視圖，一個用於顯示，另一個用於編輯。 顯示模板包含一個css類k-edit的按鈕（或任何元素），kendo將自動綁定到該列表視圖編輯操作。

顯示模板：

 <div class="item"> 
     # if (city) { # 
      #: city #<br /> 
     # } # 
     # if (postCode) { # 
      #: postCode #<br /> 
     # } # 
     <div class="btn"> 
      <a href="\\#"><span class="k-icon k-edit"></span>Edit</a> 
      <a href="\\#"><span class="k-icon k-delete"></span>Delete</a> 
     </div> 
    </div> 

編輯模板

 <div class="item editable"> 
     <div>City</div> 
     <div> 
      <input type="text" data-bind="value: city" name="city" required="required" validationmessage="*" /> 
      <span data-for="city" class="k-invalid-msg"></span> 
     </div> 
     <div>Post Code</div> 
     <div> 
      <input type="text" data-bind="value: postCode" name="postCode" required="required" validationmessage="*" /> 
      <span data-for="postCode" class="k-invalid-msg"></span> 
     </div> 
     <div class="btn"> 
      <a href="\\#"><span class="k-icon k-update"></span>Save</a> 
      <a href="\\#"><span class="k-icon k-cancel"></span>Cancel</a> 
     </div> 
    </div> 

點擊該元素將放在當前元素上使用editTemplate編輯模式。

然後在editTemplate上有另一個按鈕k-update class，kendo會自動綁定並調用數據源上的save方法。

希望這會給你更多的想法如何解決你的問題。