javascript - Knockout js 复选框点击功能问题

Question

我正在为我的页面使用 Knockout JS，其中有三个复选框。我使用了复选框的单击事件并编写了一个方法，该方法将在单击复选框时触发。它工作正常。

问题是当页面加载时，该函数正在自行调用。

这里是html

<div class="form-horizontal" id="ko-bind-element">
            <input type="hidden" id="serverJSON" value="@Newtonsoft.Json.JsonConvert.SerializeObject(Model)" />
            <div data-bind="foreach: procedures">
                <div data-bind="template: { name: Mode(), data: $data }"></div>
            </div>
        </div>
<script type="text/html" id="procedure">
            <table class="table table-bordered" >
                <tr>

                    <td class="col-md-3"><span data-bind="text: Name"></span></td>
                    <td><input type="checkbox" data-bind="attr: { name: (VId.length > 0) ? VId : Name },checked: AlreadyCompleted,click:$root.Test(UID,1)" /></td>
                    <td><input type="checkbox" data-bind="attr: { name: (VId.length > 0) ? VId : Name },checked: NotApplicable,click:$root.Test(UID,2)" /></td>
                    <td><input type="checkbox" data-bind="attr: { name: (VId.length > 0) ? VId : Name },checked: CreateNew,click:$root.Test(UID,3)" /></td>


                </tr>
                <tr>
                    <td colspan="4" style="padding:0;">

                        <div data-bind="if: CreateNew">
                            <textarea style="margin-top:10px; margin-bottom:10px;" class="col-md-offset-3 col-md-8" data-bind=" value : Text"></textarea>
                            <div class="clearfix"></div>
                        </div>
                    </td>
                </tr>
            </table>

        </script>

现在你可以看到我已经使用了click事件并且函数是Test 这是JS代码

viewModel = {
        MtocFormID: 0,
        procedures: ko.observableArray(),
        dateid:null
    };
    function createGuid() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        });
    }

    $(document).ready(function () {
        var data = JSON.parse($("#serverJSON").val());

        debugger;

        viewModel.MtocFormID = ko.observable(data.ID);
        // viewModel.dateid = ko.observable(data.ExpiryDate)
        viewModel.Test = function (uID, type) {
            var item= ko.utils.arrayFirst(viewModel.procedures(), function (item) {
                return item.UID === uID;
            });
            if (item != null) {
                if (type == 1) {
                    item.AlreadyCompleted(true);
                    item.NotApplicable(false);
                    item.CreateNew(false);
                }
               else if (type == 2) {
                   item.AlreadyCompleted(false);
                    item.NotApplicable(true);
                    item.CreateNew(false);
                }
               else if (type == 3) {
                   item.AlreadyCompleted(false);
                   item.NotApplicable(false);
                    item.CreateNew(true);
                }
            }
        };

        $(data.TemplateProcedure).each(function (index, element) {
            var mappedItem = {
                //    otherSafetyPro: ko.observableArray([]),
                UID:createGuid(),
                VId: ko.observable(element.VId),
                TemplateID: ko.observable(element.TemplateID),
                ProcedureTemplateID: ko.observable(element.ProcedureTemplateID),
                Name: ko.observable(element.Name),

                AlreadyCompleted: ko.observable(element.AlreadyCompleted),
                NotApplicable: ko.observable(element.NotApplicable),
                CreateNew: ko.observable(element.CreateNew),
                Text: ko.observable(element.Text),
                Mode: ko.observable("procedure")
            }
            viewModel.procedures.push(mappedItem);
        });

        ko.cleanNode(document.getElementById("ko-bind-element"));
        ko.applyBindings(viewModel, document.getElementById("ko-bind-element"));
        form08wizard.submitData(getSubmitData);
    });

    $(document).on("click", ".kout-create", null, function (ev) {
        addEmpty();
    });

现在的问题是 Test 方法在页面加载时被自身调用。它应该仅在单击复选框时触发。

Answer 1

这是因为您将参数传递给knockout点击事件，实际上knockout将在加载时调用该函数，因为您的函数正在被调用，因为您正在使用()来传递参数。

解决方案 1:您可以将 click 函数包装在 JS 函数中，例如:

data-bind="click: function(){ $root.Test(UID,1) }"

解决方案 2:您可以使用绑定(bind)上下文。

data-bind="click: $root.Test.bind(UID,1)"