Knockout js - Deleting an item from list after confirmation

Question

I am using knockout js and bootstrap. I have a list of users with a delete button on each row. I also have a bootstrap modal dialog that has a confirmation message whether to delete the user or not. I have a click binding on the delete button that can remove the user from the model. How do i change it so that the deletion happens after the user has confirmed. I have searched several examples and they all suggest to use custom bindings, and the closest i found was this fiddle example

http://jsfiddle.net/snaptopixel/vDZQk/

The one problem with this example is, it uses a pre-defined item from the model in the modal popup, what i want is to automatically bind the item that was deleted by the user and show the user name and other properties in the modal window and ask for confirmation.

Here is my modal dialog

<div class="modal-body">

  <div class="well">
    <p>By clicking 'Yes', you will remove the User 'foo' from the system. This action cannot be undone.  To cancel this action, click 'No'. </p>
  </div>

  <div class="modal-footer">
    <button type="button" class="btn btn-primary">Yes</button>
    <button type="button" class="btn btn-default" data-dismiss="modal">No</button>

  </div>

For example...

The modal window will say "Are you sure you want to delete User 'foo'? I would like to have access to the selected User inside the modal window.

Thanks for your help

Answer 1

Set a click binding on the 'Yes' button to the function that actually does the deletion, and set the click binding on the delete button to a function that displays the modal. You'll probably want that function to store the current item in an observable ( itemToDelete or something like that) so that the actual delete function knows what to delete.