基因敲除引導驗證回調？

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，淘汰賽感知驗證框架，使在這方面更有意義。