Question

我有一个页面有多个部分，它们一个接一个地加载（第二部分在第1部分被验证时加载）。我使用knockout 3.0在每个部分进行验证，但我收到错误 - 未捕获错误：您无法多次将绑定应用于同一元素。

请帮忙。谢谢！

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 patterns = { 电子邮件：/^([\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

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

您可以将两个单独的视图模型包装在另一个对象 actual ViewModel中：

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

然后你必须更新你的HTML才能使用它。

data-bind="click: id.ValidateIdentifierId"

Knockout 3.0-未捕获错误：您无法多次将绑定应用于同一元素。

1 个答案: