Использование привязки шаблона KnockoutJS с диалоговым окном подтверждения jQuery

Как я могу использовать диалоговое окно JQuery UI, чтобы подтвердить, хотите ли они удалить строку из списка в шаблоне KnockoutJS?

Как я вижу, демоверсии Knockout показывают шаблон, который отображает каждую строку в сетке. Кнопка удаления вызывает функцию viewModel.remove(), проходящую в объекте строки для удаления. Внутри функции remove() вызывается this.Gifts.Remove() с данными, переданными в функцию в качестве параметра.

Моя проблема в том, что я хочу отобразить диалог jQuery, чтобы попросить подтвердить, следует ли удалить строку. Диалоговое окно JQuery работает на основе функции настройки, которая заранее устанавливает диалог и функцию удаления.

Когда я нажимаю ссылку на удаление в шаблоне, открывается диалоговое окно ok, но как передать данные шаблона в функцию удаления диалога, так как теперь она полностью отделена от механизма шаблона?

Ответы

Ответ 1

Я предполагаю, что это диалог из jQuery UI. Если это так, то ваше удаление будет выглядеть примерно так:

removeItem: function(item) {
    $( "#dialog-confirm" ).dialog({
        resizable: false,
        height:140,
        modal: true,
        buttons: {
            "Delete item": function() {
                $(this).dialog("close");
                viewModel.items.remove(item);
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        }
    });
}

Итак, кнопка "Удалить элемент" закроет диалоговое окно, а также удалит ваш элемент из вашего наблюдаемого массива.

Рабочий пример здесь: http://jsfiddle.net/rniemeyer/CLxsV/

Изменить: лучший пример с использованием привязок здесь: http://jsfiddle.net/rniemeyer/WpnTU/