Using knockoutJs template binding with Jquery dialog confirmation

http://stackoverflow.com/questions/5584034/using-knockoutjs-template-binding-with-jquery-dialog-confirmation

by fenve

HTML

<script src="http://knockoutjs.com/downloads/jquery.tmpl.min.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<table>
    <tr>
        <th>Name</th>
        <th></th>
    </tr>
    <tbody data-bind="template: { name: 'itemsTmpl', foreach: items }"></tbody>
</table>

<script id="itemsTmpl" type="text/html">
    <tr>
        <td>
            <input size="4" data-bind="value: name" />
        </td>
        <td>
            <a href data-bind="click: function() { viewModel.removeItem($data) }"> Remove </a>
        </td>
    </tr>
</script>

<div id="dialog-confirm" title="Delete this item?">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This item will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

CSS

th, a { font-size: .85em; color: #444; }
td,th { padding: 5px; }
input, td { text-align: right; }
#dialog-confirm { visibility: hidden; }

JavaScript

var viewModel = {
    items: ko.observableArray([{
        name: "one"},
    {
        name: "two"},
    {
        name: "three"},
    {
        name: "four"}]),
    removeItem: function(item) {
        $( "#dialog-confirm" ).dialog({
            resizable: false,
            height:140,
            modal: true,
            buttons: {
                "Más tiempo": function() {
                    $(this).dialog( "close" );
                    viewModel.items.remove(item);
                },
                "Autoguardar": function() {
                    $(this).dialog( "close" );
                }
            }
        });
    }
};



ko.applyBindings(viewModel);