Question

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

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

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

这是因为你将一个参数传递给了敲击点击事件，实际上敲门会在加载时调用该函数，因为你正在调用你的函数，因为你使用data.table来传递你的参数。

解决方案1 ：您可以将Click函数包装在JS函数中，如：

()

解决方案2：您可以使用绑定上下文。

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

Answer 2

由于你调用了这个函数，你将click与你必须写的函数的返回绑定如下：click :(）=＆gt; $ root.Test（UID，1）

Answer 3

试试这个：

$('.checkbox').change(function(){
    if (this.checked === true) {
        addEmpty();
    }
});

还会在复选框中添加class="checkbox"以启用OnChangeHandler。

Knockout js复选框单击功能问题

3 个答案: