DevExtreme dxList 在鼠标悬停时更改项目模板

DevExtreme dxList change itemTemplate on mouse over

本文关键字：项目 dxList 鼠标 悬停 DevExtreme      更新时间：2023-09-26

我有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);

如何仅更改特定项的项模板运行时？（例如，在鼠标悬停时）

若要更改列表项模板，可以使用以下示例 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>

相关文章：