KnockoutJS如何绑定focusOut事件并控制关联字段显隐

问题根源 #

你当前的写法有两个核心错误：

• visible 绑定需要绑定一个可被Knockout监听变化的值（observable/计算属性），你直接绑定普通函数onBlurCountryEvent的话，Knockout只会在初始化页面时执行一次该函数取初始值，后续该函数执行返回值变化时Knockout无法感知，自然不会更新UI显隐状态。
• 你已经通过value: countryName把输入框和viewModel的observable做了双向绑定，不需要用jQuery手动读取输入框DOM的值，直接读取countryName()就能拿到最新值。

修复方案（两种可选） #

方案1：保留blur触发逻辑的修改方式

第一步：在viewModel中新增一个控制时区显隐的observable变量，初始值设为false：

var vm = {
    // 原有属性全部保留
    showTimeZone: ko.observable(false)
};

第二步：修改onBlurCountryEvent方法，不再直接返回布尔值，而是更新showTimeZone的值，同时保留返回true避免阻止输入框的typeahead等默认事件：

vm.onBlurCountryEvent = function () {
    var countryVal = vm.countryName();
    var isValid = countryVal != undefined && countryVal != null && countryVal != '';
    console.log(isValid);
    vm.showTimeZone(isValid);
    return true;
}

第三步：修改时区区域的visible绑定：

<div class="form" data-bind="visible: showTimeZone">

方案2：更符合Knockout响应式设计的写法（无需手动绑定blur事件）

如果你不需要严格限制只有失焦时才校验，只要国家输入框值变化就自动控制时区显隐，可以直接用计算属性，代码更简洁：
第一步：删除onBlurCountryEvent方法，同时删除input上的event: { blur: onBlurCountryEvent }绑定。
第二步：在viewModel中新增计算属性：

var vm = {
    // 原有属性全部保留
    showTimeZone: ko.pureComputed(function() {
        var countryVal = vm.countryName();
        return countryVal != undefined && countryVal != null && countryVal != '';
    })
};

第三步：时区区域的visible同样绑定showTimeZone即可，只要国家输入框值变化，时区显隐会自动更新。

内容的提问来源于stack exchange，提问作者lonelydev101