gpt4 book ai didi

jquery - 使用 knockout 提交后取消选中复选框列表

转载 作者:行者123 更新时间:2023-12-01 04:49:16 24 4
gpt4 key购买 nike

在我的复选框列表控件中,用户选择几个选项并提交它们,单击保存按钮后,这些选定的值将发送到服务器。

我使用 knockout 可观察数组来绑定(bind)数据库中的复选框选项,并且在用户选择复选框选项后也使用可观察数组将这些值发送到服务器端。

我有两个问题:

1)当用户单击“保存”按钮时,我会将这些值保存到数据库中,但复选框选项仍然处于选中状态,我想在单击“保存”按钮后取消选中这些选项。

2) 由于我从数据库绑定(bind)复选框列表的选项,因此需要 3-4 秒的时间从数据库获取值并绑定(bind)它们,但在绑定(bind)选项之前,会显示一个复选框,但不想要它待展示。

 <ul data-bind="template: { name: 'choiceTmpl', foreach: viewModel.choices, templateOptions: { selections: viewModel.selectedChoices } }"></ul>

<script id="choiceTmpl" type="text/html">
<li>
<input type="checkbox" data-bind="attr: { value: $data }, checked: viewModel.selectedChoices" />
<span data-bind="text: $data"></span>
</li>
</script>

这就是我的 View 模型的样子

<script type="text/javascript">

var viewModel = {
choices: ["one", "two", "three", "four", "five"],

selectedChoices: ko.observableArray()
};

ko.applyBindings(viewModel);
</script>

按钮点击事件

<script type="text/javascript">
$(document).ready(function () {
$("#btnSubmit").click(function () {

});
});
</script>

最佳答案

如果你一路走来并且不在那里混合任何 jQuery(除了用于 AJAX 请求和您的自定义绑定(bind))。

这是我要改变的内容

  • 提交完成后使用viewModel.selectedOptions.removeAll这应该会按照您的要求清除复选框
  • data-bind="visible: true"style="display: none;" 添加到要绑定(bind)的顶部元素。这将使模板在 knockout 完成绑定(bind)之前不会显示。这应该可以避免“显示单个复选框”问题。如果没有,我将使用不同的解决方案修改此答案,因为我可能不明白您正在填充复选框的值。
  • 使用 checkedValue 告诉复选框值是什么,而不是 attr: { value...。这是 knockout 3.0 绑定(bind),但如果您仍在使用 knockout 2.0,则非常值得升级。它允许使用任意对象来匹配已检查的绑定(bind),而不仅仅是字符串。 注意:您的 attr: { value... 应该可以正常工作,因为您只使用字符串。
  • 让 knockout 处理表单提交,而不是 jQuery 单击事件。这也不是让你的东西正常工作所必需的。

这里是一些修改后的代码:

<ul data-bind="foreach: choices">
<li>
<input type="checkbox" data-bind="checked: $parent.selectedChoices, checkedValue: $data" />
<span data-bind="text: $data"></span>
</li>
</ul>

<button type="button" data-bind="click: submit">Submit</button>

<script type="text/javascript">
var viewModel = {
choices: ["one", "two", "three", "four", "five"],
selectedChoices: ko.observableArray(),
submit: function () {
//your submit code here
//read your selectedChoices, call $.ajax, etc

//when all is finished, do the following:
viewModel.selectedChoices.removeAll(); //this clears the checkboxes
}
};

$(document).ready(function () {
ko.applyBindings(viewModel);
});
</script>

这个想法是你不必告诉你的 javsacript DOM 中发生了什么。 ko.applybindings 应该处理所有这些事情。无需手动将点击事件绑定(bind)到提交按钮。

如果您必须使用 jQuery .click(function () {... 绑定(bind)到提交按钮,只需将 selectedChoices.removeAll 放入 done 中 你的 ajax 请求,无论它是从哪里执行的。

关于jquery - 使用 knockout 提交后取消选中复选框列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23722861/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com