Question

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

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

我有2个问题：

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;"添加到要绑定的顶部元素。这将使模板不会显示，直到敲除完成绑定。这应该避免你的单个复选框显示＆＃34; prolem。如果它没有，我会用不同的解决方案修改这个答案，因为我可能不理解你正在填写复选框的值。
使用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内，无论它是从哪里执行的。

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

1 个答案: