如何将focusOut事件绑定到knockoutjs

Posted 2023-03-27

【中文标题】如何将focusOut事件绑定到knockoutjs

【英文标题】：How to bind focusOut event to 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吗？

【参考方案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>