Question

在使用 Kendo UI Mobile ＆amp ;;时，在列表视图中编辑项目的正确方法是什么？的 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"});

我希望listview能够反映对该项的Name属性的更改。而是将新项目添加到列表视图中。检查数组显示没有其他项目，并且已进行更改。（重新）将视图绑定到视图模型更新列表以反映更改。在这样的改变之后重新绑定似乎没有任何意义。

这是jsfiddle： http://jsfiddle.net/5aCYp/2/

Answer 1

我不确定我是否理解你的问题：但这就是我使用Kendo Web UI做类似的事情，我希望移动设备与API 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>

修改模板

     <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方法。

希望这会为您提供更多有关如何解决问题的建议。

Answer 2

问题是由模板中的<li>引起的。小部件已经提供<li>，因此额外的<li>会使渲染变得混乱。 Petyo在kendo ui forums

中回答了这个问题

使用Kendo UI Mobile＆amp; amp;时，在列表视图中编辑项目的正确方法是什么？ MVVM？

2 个答案: