Question

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

我现在已经在淘汰赛中工作了一段时间，我想5年了，从来没有做过这样或类似的事情。

好吧，我们有一个很大的应用程序，差不多完成了，但我们需要用KO组件替换应用程序的某些部分。

在其中一个组件中，使用data-bv-callback-callback验证在该字段中输入的数据非常重要，问题在于，这不是KO合规性，而且我是我没有办法让这个工作，所以我需要一只手。

我已经创建了一个JS Fiddle，作为一个例子（好吧，我从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 =＆＃34; myViewModel.checkCaptchaKO＆＃34;，但我无法做到，因为我＆＃ 39;关于某个组件，我不知道我的范围是什么。

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，在此背景下，淘汰感知验证框架更有意义。

knockout bootstrap validation callback？

1 个答案: