如何将 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 () {
           ...
        };
    });

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

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

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

Answer 1

问题是函数 onBlurCountryEvent 不是可观察的，因此 knockout 不会检查更改。我建议在您的视图模型中添加 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>

如何将 focusOut 事件绑定到 knockoutjs

How to bind focusOut event to knockoutjs

html

javascript

knockout.js