javascript - DevExtreme dxList マウスオーバーで itemTemplate を変更

Question

私は DevExtreme dxList を持っています:

<div data-bind="dxList: { dataSource: ds, itemTemplate: tpl }">
</div>

var vm = {
    ds: [{
        "key": "group1",
        "items": [{ name: "item1" }, { name: "item2" }]
    }],

    tpl: function() {
        var r = '<div data-options="dxTemplate:{ name:\'tpl\' }">';
            r += '<div data-bind="dxCheckBox: { text: name }"></div>';
            r += '</div>';
            return r;
        }
    };
};

ko.applyBindings(vm);

特定のアイテムの itemTemplate ランタイムのみを変更するにはどうすればよいですか? (例: マウスオーバー時)

Answer 1

リスト項目テンプレートを変更するには、次のサンプルを使用できますhttp://jsfiddle.net/oakvprw9/8/

これは、アイテム テンプレートの例です。

<div data-bind="dxList: { dataSource: dataSource, onItemClick: onItemClick }">
<div data-options="dxTemplate: { name: 'item' }">
    <div>
        <span data-bind="text: text, visible: !editEnabled()"></span>
        <div data-bind="visible: editEnabled">
            <div data-bind="dxTextBox: { value: text }"></div>
            <div data-bind="dxButton: { text: 'Save', onClick: $root.saveChanges }"></div>
            <div data-bind="dxButton: { text: 'Cancel', onClick: $root.cancelChanges }"></div>
        </div>
    </div>
</div>