淘汰赛 bootstrap 验证回调？

Question

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

我已经使用 knockout 工作了一段时间，我想有 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="myViewModel.checkCaptchaKO"，但我做不到，因为我在一个组件上，我不知道我的范围是什么。

Answer 1

您可以使用ko.dataFor() (docs) 来动态获取与某个元素关联的viewmodel。

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

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，在这种情况下，敲除感知验证框架更有意义。

淘汰赛 bootstrap 验证回调？

knockout bootstrap validation callback?

javascript

twitter-bootstrap

knockout.js

bootstrapvalidator