基因敲除引导验证回调？

Question

我不知道从哪里开始，但我会尽我所能解释我的问题。

我一直在使用淘汰赛一段时间，现在我想5年了，从来没有这样做或类似的东西。我们有一个很大的应用程序，几乎已经完成了，但我们需要用KO组件替换应用程序的某些部分。

在其中一个组件中，有一个数据-BV回调回调来验证在该字段中输入的数据是非常重要的，事情是，这不是KO合规性，而且我没有找到方法为了得到这个工作，所以我需要一只手。

我已经创建了一个JS小提琴，作为一个例子（当然，我从bootstrapvalidator的页面中找到了这个例子）。

<form id="callbackForm" class="form-horizontal" data-bv-feedbackicons-valid="glyphicon glyphicon-ok" data-bv-feedbackicons-invalid="glyphicon glyphicon-remove" data-bv-feedbackicons-validating="glyphicon glyphicon-refresh"> 
    <div class="form-group"> 
     <label class="col-lg-3 control-label" id="captchaOperation"></label> 
     <div class="col-lg-2"> 
      <input type="text" class="form-control" name="captcha" data-bv-callback="true" data-bv-callback-message="Wrong answer" data-bv-callback-callback="checkCaptcha" /> 
     </div> 
    </div> 

    <div class="form-group"> 
     <label class="col-lg-3 control-label">Knockout</label> 
     <div class="col-lg-2"> 
      <input type="text" class="form-control" data-bind="value: Value" name="knockout" data-bv-callback="true" data-bv-callback-message="Wrong answer" data-bv-callback-callback="checkCaptchaKO" /> 
     </div> 
    </div> 
</form> 

https://jsfiddle.net/rothariger/9hmmc3e1/

有人点我在正确的方向？

感谢您的任何帮助。 此致敬礼。

ps：我知道在我通过的例子中，我可以把data-bv-callback-callback =“myViewModel.checkCaptchaKO”，但我做不到，因为我在一个组件上，我不知道我的范围是什么。

Answer 1

您可以使用ko.dataFor()（docs）动态获取与特定元素关联的视图模型。

触发验证的元素作为第三个参数传递给回调函数。

function randomInt(min, max) { 
 
    return Math.floor(Math.random() * (max - min + 1) + min); 
 
}; 
 

 
function checkCaptcha(value, validator, $field) { 
 
    var vm = ko.dataFor($field[0]); 
 
    return +value === vm.captcha1 + vm.captcha2; 
 
}; 
 

 
$(function() { 
 
    ko.applyBindings({ 
 
     captcha1: randomInt(1, 10), 
 
     captcha2: randomInt(1, 20), 
 
     Value: ko.observable() 
 
    }); 
 
    $('#callbackForm').bootstrapValidator(); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script> 
 

 
<form id="callbackForm" class="form-horizontal" data-bv-feedbackicons-valid="glyphicon glyphicon-ok" data-bv-feedbackicons-invalid="glyphicon glyphicon-remove" data-bv-feedbackicons-validating="glyphicon glyphicon-refresh"> 
 

 
    <div class="form-group"> 
 
     <label class="col-lg-3 control-label" id="captchaOperation"> 
 
      <span data-bind="text: captcha1"></span> + 
 
      <span data-bind="text: captcha2"></span> = 
 
     </label> 
 
     <div class="col-lg-2"> 
 
      <input type="text" class="form-control" data-bind="textInput: Value" name="knockout" data-bv-callback="true" data-bv-callback-message="Wrong answer" data-bv-callback-callback="checkCaptcha" /> 
 
      <span data-bind="if: Value">You entered <span data-bind="text: Value"></span>.</span> 
 
     </div> 
 
    </div> 
 

 
</form>

我建议寻找到knockout-validation，淘汰赛感知验证框架，使在这方面更有意义。