如何将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>

这是我的knockoutjs：

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

所以，正如你所看到的，我想要有一些事件和绑定函数，当我从我的字段country执行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>

​