使用敲除提交后取消选中复选框列表

Question

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

我使用敲除可观察数组来绑定数据库中的复选框选项，并且在用户选择复选框选项后还使用可观察数组将这些值发送到服务器端。

我有两个问题：

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

2) 由于我从数据库中绑定复选框列表的选项，需要 3-4 秒的时间从数据库中获取值并绑定它们，但在绑定选项之前，会显示单个复选框并且不需要它被展示出来。

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

这就是我的视图模型的样子

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

Answer 1

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

这就是我要改变的地方

• 提交完成后使用viewModel.selectedOptions.removeAll。 这应该会清除您询问的复选框。
• 将data-bind="visible: true" style="display: none;" 添加到要绑定的顶部元素。这将阻止模板显示，直到敲除完成绑定。这应该避免您的“单个复选框显示”问题。如果不是，我将使用不同的解决方案修改此答案，因为我可能不理解您正在填充复选框的值。
• 使用checkedValue 告诉复选框值是什么，而不是attr: { value...。这是一个淘汰赛 3.0 绑定，但如果您仍在使用淘汰赛 2.0，则非常值得升级。它允许使用任意对象来匹配已检查的绑定，而不仅仅是字符串。 注意：您的 attr: { value... 应该可以正常工作，因为您只使用字符串。
• 让敲除处理表单提交，而不是 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 应该负责所有这些。无需手动将点击事件绑定到您的提交按钮。

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