knockoutjs 和 jQuery 模板 - 将值传递给模板中的点击处理程序

发布于 2024-12-02 09:35:22 字数 2198 浏览 0 评论 0原文

设置:

我使用带有默认 jQuery 模板的淘汰赛。

我有一个下拉列表(组合)和一个表格。该表包含项目列表。每行都有一个带有项目名称的 td 和一个带有“删除”链接的 td。

如果某个项目在组合中,则它不在表中,反之亦然。

如果我在组合中选择一个项目,则会发生三件事:

  1. 值被写入我的模型 (this.selectedCostCentre = ko.observable('');)

  2. 该项目已添加到表中。

  3. 该项目从组合中删除。

到目前为止,一切都很好。问题是,当我从表中删除一个项目时,我想将其添加回组合中:

我使用删除按钮删除该项目。我的问题是我找不到引用哪个项目被删除的方法。

所以,问题是:

如何将表中删除的项目的值传递到视图模型上处理删除链接的数据绑定单击事件的方法中?

代码:

表:

<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>

组合:

<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>

查明问题:

我遇到问题的行是:

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

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>  </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>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

旧城烟雨 2024-12-09 09:35:22

好的,刚刚回答了我自己的问题:语法是:

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

即答案是:

$data

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
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文