Kendo ui 使用Kendo UI Mobile&；时，在listview中编辑项目的正确方式是什么；MVVM？

使用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>​

我希望listview反映对该项的Name属性的更改。相反，将向listview添加一个新项。检查数组会发现没有其他项，并且已经进行了更改。（重新）将视图绑定到视图模型会更新列表以反映更改。在这样的更改之后重新绑定似乎没有任何意义

这是jsfiddle:

---

我不确定是否正确理解了您的问题：但这就是我对剑道Web UI的类似操作，我希望从API的角度来看，mobile与Web UI没有太大区别

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

我绑定listview的方式是不同的，但是我想你也可以用你的方法得到类似的结果

我将两个模板传递给列表视图，一个用于显示，另一个用于编辑。 显示模板包含一个带有css类

k-edit

的按钮（或任何元素），kendo将自动将listview编辑操作绑定到该按钮

显示模板：

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

#若（城市）{#
#：城市#

# } #
#if（邮政编码）{#
#：邮政编码#

# } #

编辑模板

     <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

类，kendo将自动绑定到该按钮并调用数据源上的save方法

---

希望这将为您提供更多解决问题的方法。

问题是由模板中的

引起的。小部件已经提供了

，因此额外的

会扰乱渲染。Petyo在

谢谢中回答了这个问题，但我的情况不同，因为我使用的是MVVM。我用一个更清晰的代码示例更新了这个问题，还创建了一个JSFIDLE。

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