如何将focusOut事件绑定到knockoutjs答案

【问题标题】：How to bind focusOut event to knockoutjs如何将focusOut事件绑定到knockoutjs
【发布时间】：2021-10-26 09:30:04
【问题描述】：

我正在尝试将 focusout 事件绑定到我的淘汰赛 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 () {
           ...
        };
    });

所以，如您所见，当我从我的字段国家/地区执行 onBlur 时，我希望有一些事件和绑定功能，以检查和预览时区字段是否从下拉搜索中选择了任何国家/地区。此外，如果用户跳过国家/地区，则提交的时区应保留为visible:false

该事件有效，我可以在控制台中看到真/假值。但是，我的 timeZone 字段是完整的。无论此国家/地区字段为空还是非空，这些字段始终可见。如果我输入visible:false（硬编码值），它就可以工作。

我需要绑定那个函数vm.onBlurCountryEvent吗？

【问题讨论】：

标签： javascript html knockout.js

【解决方案1】：

问题在于函数onBlurCountryEvent 不是可观察的，因此淘汰赛不会检查更改。我建议将isTimezoneVisible : ko.observable(false) 添加到您的视图模型中，然后设置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>

【讨论】：