jquery - Knockout 3.0-未捕获错误 : You cannot apply bindings multiple times to the same element.

Question

我有一个包含多个部分的页面，这些部分依次加载(验证第 1 部分时加载第二部分)。我正在使用 knockout 3.0 在每个部分中执行验证，但出现错误 - Uncaught Error :您不能将绑定(bind)多次应用于同一元素。

请帮忙。谢谢!

HTML: 关闭 继续

<section id="modal2resetpwd" class="modal fade hide component">
<header class="modal-header">
    <h1 class="modal-title form-title" id="modalTitle"></h1>
</header>
<article class="modal-body" id="modalContent">
    <p class="intro-line">enter the id you want to use for verification</p>
    <table class="table">
        <tr>
            <td>
                <label>
                    <input type="radio" value="employeeid" name="identifier" checked="checked">employee id</label></td>
        </tr>
        <tr>
            <td>
                <label>
                    <input type="radio" value="buid" name="identifier">BU id</label></td>
        </tr>
    </table>
    <div data-bind='validationOptions: { messageTemplate: "customMessageTemplate" }'>
        <input style="width: 50%; margin-left: 20%;" data-bind="value: identifierId, valueUpdate: 'afterkeydown', event: { 'keyup': checkNumber }" />
    </div>
    <table class="table">
        <tr>
            <td>
                <label>
                    <input type="radio" value="email" name="identifier" disabled="disabled">email id</label></td>
        </tr>
        <tr>
            <td>
                <label>
                    <input type="radio" value="phone" name="identifier" disabled="disabled">phone number</label></td>
        </tr>
    </table>
</article>
<footer class="modal-footer">
    <div class="modal-controls">
        <a class="btn btn-icon" href="javascript:ActivatePanel(1)">
            <img class="icon-image" src="~/Content/Images/icon-return.png" />return</a>
        <a class="btn btn-icon" data-bind="click: ValidateIdentifierId">
            <img class="icon-image" src="~/Content/Images/icon-run.png" />proceed</a>
    </div>
</footer>

JS: var 模式 = { 电子邮件:/^([\d\w-.]+@([\d\w-]+.)+[\w]{2,4})?$/, 电话:/^\d[\d -]\d$/, 标识符:/^\d/， 邮政编码:/^([a-zA-Z]{1,2}[0-9][0-9]?[a-zA-Z\s]?\s*[0-9][a-zA -Z]{2,2})|(GIR 0AA)$/ };

var viewModelEmail = {
emailAddress: ko.observable().extend({
    required: { message: requiredEmail },
    pattern: {
        params: patterns.email,
        message: invalidEmail
    }
}),

ValidateEmailAddress: function () {
    if (viewModelEmail.emailerrors().length == 0) {
        // TO DO Validate entered email address 
        ActivatePanel(2);
    } else {
        viewModelEmail.emailerrors.showAllMessages();
    }
}
};

viewModelEmail.emailerrors = ko.validation.group(viewModelEmail);

ko.applyBindings(viewModelEmail, $("#modal1resetpwd")[0]);

var viewModelId = {
identifierId: ko.observable().extend({
    required: { message: requiredIdentifierId },
    minLength: 2,
    maxLength: 6,
    pattern: {
        params: patterns.identifier,
        message: invalidId
    }
}),

ValidateIdentifierId: function () {
    if (viewModelId.iderrors().length == 0) {
        // TO DO Validate entered email address 
        ActivatePanel(3);
    } else {
        viewModelId.iderrors.showAllMessages();
    }
}
};

viewModelId.iderrors = ko.validation.group(viewModelId);

ko.applyBindings(viewModelId, $("#modal2resetpwd")[0]);

Answer 1

就像它所说的那样，即使绑定(bind)不同，您也会为 #modal2resetpwd 调用 ko.applyBindings 两次。您只能应用一次绑定(bind)。

您可以将两个单独的 View 模型包装在另一个对象中，即实际 ViewModel:

ko.applyBindings({
    id: viewModelId,
    email: viewModelEmail,
}, document.getElementById("modal2resetpwd"));

那么您必须更新 HTML 才能使用它。

data-bind="click: id.ValidateIdentifierId"