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>