0

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

その項目の Name プロパティの変更がリストビューに反映されることを期待しています。代わりに、新しいアイテムがリストビューに追加されます。配列を調べると、追加の項目がなく、変更が行われたことがわかります。ビューをビューモデルに (再) バインドすると、リストが更新されて変更が反映されます。このような変更後の再バインドは意味がないようです。

これがjsfiddleです： http://jsfiddle.net/5aCYp/2/

4

2 に答える 2

0

この問題は<li>、テンプレートの が原因で発生しました。ウィジェットはすでに を提供している<li>ため、追加<li>するとレンダリングが台無しになります。この質問は、Kendo ui フォーラムで Petyo によって回答されました。

于 2012-12-07T15:55:15.753 に答える
0

あなたの質問を正しく理解しているかどうかはわかりませんが、これは私が Kendo Web UI で似たようなことをした方法です。API の観点からは、モバイルは Web UI とそれほど変わらないと思います。

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

リストビューをバインドする方法は異なりますが、メソッドでも同様の結果が得られると思います。

表示用と編集用の 2 つのテンプレートをリスト ビューに渡します。k-edit表示テンプレートには、剣道がリストビュー編集アクションを自動的にバインドするcss クラスを持つボタン (または任意の要素) が含まれています。

表示テンプレート:

     <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クラスを持つ別のボタンがあり、剣道は自動的にバインドしてデータ ソースの save メソッドを呼び出します。

これにより、問題を解決する方法についてより多くのアイデアが得られることを願っています。

于 2012-12-06T08:05:47.300 に答える