Knockout根据下拉选择检查绑定

时间:2014-03-04 22:54:08

标签: javascript knockout.js

说我有以下绑定:

<p>blah blah<input type="checkbox" data-bind="checked: shouldShow" /></p>
 <div data-bind="visible: shouldShow ">...</div>    
 <select data-bind="options: availableCountries,
                       optionsText: 'countryName',
                       value: selectedCountry,
                       optionsCaption: 'Choose...'">
 </select>

我想做的是:

  1. 选择某个国家/地区时,应自动选中该复选框,并显示div部分。
  2. 当用户选择其他国家/地区时,不会自动选中该复选框,但如果用户手动选中该复选框,则应显示div。
  3. 我有以下

     shouldShow = ko.computed(function() {                
                    if(selectedCountry == 'UK') 
                        return true;
                    else
                        return false;
                 }, this);
    

    现在这适用于1,但如果用户选择其他国家/地区,并且当用户选中该复选框时,则不会发生任何事情。我该如何解决?

1 个答案:

答案 0 :(得分:2)

如果我正确理解了这些要求,手动订阅可能适用于此方案。

您可以将shouldShow设为可观察对象,然后针对selectedCountry创建手动订阅,以确定是否应更新shouldShow。这允许shouldShow独立于国家/地区维护一个值。

this.shouldShow = ko.observable();

this.selectedCountry = ko.observable();

this.selectedCountry.subscribe(function(newValue) {
    this.shouldShow(newValue === "UK");
}, this);

更改国家/地区后,系统会更新复选框。但是,如果用户选中该框,它仍会将其设置为true。