knockoutjs 和 jQuery 模板 - 将值传递给模板中的点击处理程序
设置:
我使用带有默认 jQuery 模板的淘汰赛。
我有一个下拉列表(组合)和一个表格。该表包含项目列表。每行都有一个带有项目名称的 td 和一个带有“删除”链接的 td。
如果某个项目在组合中,则它不在表中,反之亦然。
如果我在组合中选择一个项目,则会发生三件事:
值被写入我的模型 (this.selectedCostCentre = ko.observable('');)
该项目已添加到表中。
该项目从组合中删除。
到目前为止,一切都很好。问题是,当我从表中删除一个项目时,我想将其添加回组合中:
我使用删除按钮删除该项目。我的问题是我找不到引用哪个项目被删除的方法。
所以,问题是:
如何将表中删除的项目的值传递到视图模型上处理删除链接的数据绑定单击事件的方法中?
代码:
表:
<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>
组合:
<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:
The value gets written to my model (this.selectedCostCentre = ko.observable('');)
The item gets added to the table.
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
好的,刚刚回答了我自己的问题:语法是:
即答案是:
OK, just answered my own question: The syntax is:
Ie, the answer is: