DevExtreme dxList изменить элемент шаблона при наведении курсора мыши

У меня есть 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 только для определенного элемента? (например, при наведении курсора мыши)


javascript binding devexpress devextreme knockout.js
person user2005634    schedule 19.01.2015    source источник
comment
Не могли бы вы уточнить, как именно вы хотите изменить шаблон элемента? Если вы хотите показать какой-либо элемент при наведении курсора мыши, вам не нужно менять шаблон элемента.   -  person Sergey    schedule 20.01.2015
comment
Ты прав. Мне просто нужно показать какой-то элемент при наведении курсора, например, текстовое поле вместо статического текста. Потому что мне нужно разрешить пользователю редактировать текст групп и элементов   -  person user2005634    schedule 20.01.2015
comment
Мне нужно разрешить пользователю изменять текст групп и элементов. Как изменить статический текст на время выполнения dxTextbox для выбранного элемента? Мне также нужно показать кнопки сохранения и отмены на редактируемом элементе.   -  person user2005634    schedule 20.01.2015

Ответы (1)


arrow_upward
0
arrow_downward

Чтобы изменить шаблон элемента списка, вы можете использовать следующий пример: 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>

person Sergey    schedule 20.01.2015
comment
Я использую режим dxList is editEnabled = true по умолчанию, потому что мне нужны функции удаления и изменения порядка. Таким образом, как я могу реализовать функцию переупорядочивания самостоятельно? Я очень новичок в DevExtreme... - person user2005634; 21.01.2015
comment
Чтобы включить изменение порядка элементов списка, вы можете использовать параметры editConfig: { reorderEnabled: true }, editEnabled: true. Кроме того, вы можете использовать обработчик onItemReordered, чтобы назначить функцию для выполнения пользовательского действия, когда элемент списка перемещается в другую позицию (см. документация). Я обновил свой предыдущий образец http://jsfiddle.net/oakvprw9/15/. - person Sergey; 21.01.2015
comment
Это здорово. Последнее улучшение: при нажатии кнопки сохранения/отмены элемент списка должен вернуться к исходному макету (скрыть кнопки сохранения/отмены), но у меня это не работает: saveChanges: function(arg){ var itemData = arg.model; arg.model.editEnabled (ложь); //Почему не работает? } - person user2005634; 21.01.2015
comment
Вы можете попробовать использовать виртуальный элемент <!-- ko if --> вместо привязки visible. Я обновил свой образец http://jsfiddle.net/oakvprw9/16/. - person Sergey; 21.01.2015