Question

我是knockoutjs的新手。我有两个共享相同模型的表单。我正在尝试验证一些输入等。表单具有类似的输入字段，但它们具有不同的ID。问题是，当我在第一个表单的zipcode中键入内容时，结果始终显示在第二个表单中。有什么我可以做的吗？

<form id="c1"method="post" action="" >
<input name="zipcode" type="text" id="zipcode" data-bind="value: zipcode, valueUpdate: ['keyup', 'blur']" >
</form>

<form id="c2" method="post" action="">
<input name="zipcode" type="text" id="zipcode"  data-bind="value: zipcode, valueUpdate: ['keyup', 'blur']">
</form>

var Contact = function(id) {
    var self = this;
    ko.validation.rules['mustEqual'] = {
        async: true,
        validator: function (val, otherVal, callback) {
            $(id).append("result");
        },
        message: 'The field must equal {0}'
    };

    ko.validation.registerExtenders();
    self.zipcode = ko.observable(12).extend({ mustEqual: 5 });

}       
ko.applyBindings(new Contact(document.getElementById("c1")),document.getElementById("c1"));
ko.applyBindings(new Contact(document.getElementById("c2")), document.getElementById("c2"));

Answer 1

执行此行时

ko.applyBindings(new Contact(document.getElementById("c2")), document.getElementById("c2"));

您的视图模型会使用c1表单引用覆盖旧的c2验证规则，因此始终执行最后一个已注册的验证程序，在您的情况下为c2。如果您将语句顺序切换为

ko.applyBindings(new Contact(document.getElementById("c2")), document.getElementById("c2"));
ko.applyBindings(new Contact(document.getElementById("c1")), document.getElementById("c1"));

您会看到它会附加form#c1。因此，在规划模型之外移动规则注册。

此外，如果您将async标记设置为true，则应使用callback功能。像

这样的东西

validator: function (val, otherVal,callback) {
        callback(val == otherVal); 
        //$(id).append("result");
    },

JsFiddle

valueUpdate事件应用于多个viewmodel knockoutjs

1 个答案: