knockoutjs and jQuery templates - passing a value to the click handler in a template

Setup:

I am using knockout with the default jQuery templates.

I have a dropdownlist (combo) and a table. The table holds a list of items. Each row has a td with the name of the item and a td with a "Delete" link.

If an item is in the combo, it is not in the table and vice versa.

If I choose an item in the combo, three things happen:

1. The value gets written to my model (this.selectedCostCentre = ko.observable('');)

2. The item gets added to the table.

3. the item gets removed from the combo.

So far, so good. The problem is that when I remove an item from the table, I want to add it back into the combo:

I remove the item with a delete button. My problem is that I can't find a way to reference which item is being deleted.

So, the problem is:

How can I pass the value of the item that I delete in the table into the method on my viewmodel that handles the data-bind click event of the delete link?

Code:

Table:

<fieldset style="padding-top:10px;">
    <legend>Actividades Asociadas</legend>
    <table>
        <thead>
            <tr>
                <th>
                    Actividad
                </th>
                <th>&nbsp;&nbsp;</th>
            </tr>
        </thead>
        <tbody data-bind="template: {name:'actividadesAsociadas', foreach: viewModel.costCentres}"></tbody>
    </table>
</fieldset>
<script type="text/x-jquery-tmpl" id="actividadesAsociadas">
    <tr>
        <td data-bind="text: NameCC"></td>
        <td><a href="#" data-bind="click: function() { viewModel.removeCC('how to identify the item being deleted?') }">Delete</a></td>
开发者_开发知识库    </tr>
</script>

Combo:

<fieldset>
    <legend>Asociar Actividades a la Cuenta</legend>

    <div class="editor-label">
        Elija Actividad
    </div>
    <div class="editor-field">
        <select id="All" data-bind="options: allCostCentres, value: selectedCostCentre, optionsValue: 'CostCentreId', optionsText: 'NameCC', optionsCaption: 'Choose...'"></select>
    </div>
    <input type="hidden" name="AccountId" id="AccountId" value="@Model.AccountId" />
</fieldset>

Pinpointing the problem:

The line I have problems with is:

<td><a href="#" data-bind="click: function() { viewModel.removeCC('how to identify the item being deleted?') }">Delete</a></td>

OK, just answered my own question: The syntax is:

<a href="#" data-bind="click: function() { viewModel.removeCC($data) }">Delete<a/>

Ie, the answer is:

$data