使用KnockoutJS模板绑定jQuery UI确认对话框

Question

我将如何使用jQuery UI对话框来确认是否要从KnockoutJS模板中的列表中删除行？

在我看来,Knockout演示显示了一个模板,用于渲染网格中的每一行.删除按钮调用viewModel.remove()传递要删除的行的对象的函数.在remove()函数内部,this.Gifts.Remove()调用传递给函数的数据作为参数.

我的问题是我想显示一个jQuery对话框,要求确认是否应该删除一行.JQuery对话框基于设置功能工作,该功能预先设置对话框及其删除功能.

当我单击模板中的删除链接时,它会打开对话框确定,但是如何将模板数据传递到对话框删除功能,因为它现在与模板机制完全分离？

Answer 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");
            }
        }
    });
}

因此,"删除项目"按钮将关闭对话框,并从observableArray中删除您的项目.

这里的工作示例:http://jsfiddle.net/rniemeyer/CLxsV/

编辑:使用绑定更好的示例:http://jsfiddle.net/rniemeyer/WpnTU/