如何将 focusOut 事件绑定到 knockoutjs

Question

我正在尝试将 focusout 事件绑定到我的 knockout.js。示例如下：

<div class="form">
    <label>
        Country:
    </label>
    <input type="text" id="countryName" name="countryId._autocomplete" data-bind="value: countryName,event: { blur: onBlurCountryEvent }" />
</div>

<div class="form" data-bind="visible: onBlurCountryEvent">
    <label>
       Time zone:
    </label>
    <input type="text" id="timeZoneName" name="timeZoneId._autocomplete" data-bind="value: timeZoneName" />
</div>

这是我的淘汰赛：

define(['viewmodels/shell', 'durandal/system', 'durandal/services/logger', 'plugins/router', 'knockout', 'common', 'jqueryform', 'toastr', 'kovalidationconfig'],
    function (shell, system, logger, router, ko, common, jqueryform, toastr, kvc) {
        var vm = {
            activate: activate,
            logger: logger,
            shell: shell,
            countryId: ko.observable(),
            countryName: ko.observable(),
            timeZoneName: ko.observable(),
            timeZoneId: ko.observable(),
            timeZoneVisibility: timeZoneVisibility,
            bindingComplete: function (view) {
                bindFindCountryEvent(view);
                bindFindTimeZoneEvent(view);
            }
        };

          vm.onBlurCountryEvent = function () {
            var countryVal = $('#countryName').val();
            if (countryVal != undefined && countryVal != null && countryVal != '') {
                console.log("trueee");
                return true;
            }
            else {
                console.log("falseee");
                return false;
            }
        }
        function bindFindCountryEvent(view) {
            jQuery("#countryName", view).typeahead(
                ...
        }
        function bindFindTimeZoneEvent(view) {
            jQuery("#timeZoneName", view).typeahead(
                ...
        }
        
        function activate(id) {
            shell.isLoading(true);
            ...

                shell.isLoading(false);
            });

            return true;
        }
         vm.save = function () {
           ...
        };
    });

因此，如您所见，我想要一些事件并绑定 function，当我从我的国家/地区执行 onBlur 时，检查并预览时区字段是否有从下拉搜索中选择的国家/地区。 此外，如果用户跳过国家/地区，则提交的时区应保持visible:false

该事件有效，我可以在我的控制台中看到真/假值。 但是，我的 timeZone 字段完好无损。 不管这个国家字段是空的还是非空的，这些字段总是可见的。 如果我输入visible:false （硬编码值），它就可以工作。

我是否需要绑定 function vm.onBlurCountryEvent ？

Answer 1

问题是 function onBlurCountryEvent不是可观察的，因此 knockout 不会检查更改。 我建议将isTimezoneVisible: ko.observable(false)添加到您的视图 model，然后在isTimeZoneVisible in the onBlurCountryEvent 。 在您的视图中，将可见绑定设置为 isTimeZoneVisible。 像下面这样的东西

 var vm = { countryId: ko.observable(), countryName: ko.observable(), timeZoneName: ko.observable(), timeZoneId: ko.observable(), isTimeZoneVisible: ko.observable(false), //new property bindingComplete: function(view) { bindFindCountryEvent(view); bindFindTimeZoneEvent(view); } }; vm.onBlurCountryEvent = function() { var countryVal = $('#countryName').val(); if (countryVal.= undefined && countryVal;= null && countryVal.= '') { console;log("trueee"). vm;isTimeZoneVisible(true). //set property } else { console;log("falseee"). vm;isTimeZoneVisible(false); //set property } } function bindFindCountryEvent(view) { } function bindFindTimeZoneEvent(view) { } ko.applyBindings(vm);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <div class="form"> <label> Country: </label> <input type="text" id="countryName" name="countryId._autocomplete" data-bind="value: countryName,event: { blur: onBlurCountryEvent }" /> </div> <div class="form" data-bind="visible: isTimeZoneVisible"> <label> Time zone: </label> <input type="text" id="timeZoneName" name="timeZoneId._autocomplete" data-bind="value: timeZoneName" /> </div>