使用Knockout更新选择值更改时的文本数据绑定

Question

我试图创建一个查询块，用户可以用它来搜索一个人的年龄。您可以搜索任何年龄的人，小于/大于某个年龄的人，或介于两个年龄之间的人。

JSFiddle

输入字段可以根据需要隐藏和显示，没有问题。
我想要实现的是，标题中的文本(包含当前搜索查询的单词，例如(current: any/younger than/older than/ between .. and ..))在我更改选择字段的值时也会发生变化。

所以当选择改变时，标题中的文本值应该自动重置为(current: any)。

这是我目前的(简化)代码(完整代码可以在小提琴中找到):

<h2>Age&nbsp;<small>(current: <span data-bind="text: ageRange"></span>)</small></h2>
<select data-bind="value: age">
    <option value="0">Any</option>
    <option value="1">Younger than</option>
    <option value="2">Older than</option>
    <option value="3">Between</option>
</select>
<div data-bind="visible: age() == 1">
    <input type="number" data-bind="value: ageHigh" />
</div>
<div data-bind="visible: age() == 2">
    <input type="number" data-bind="value: ageLow" />
</div>
<div data-bind="visible: age() == 3">
    <div>
        <input type="number" data-bind="value: ageLow" />
    </div>
    <p>and</p>
    <div>
        <input type="number" class="form-control" data-bind="value: ageHigh" />
    </div>
</div>

JS:

function QueryViewModel() {
    var self = this;
    self.ageLow = ko.observable('');
    self.ageHigh = ko.observable('');
    self.age = ko.observable('');
    self.ageRange = ko.computed(function () {
        var range = 'any';
        if (self.ageLow() != '' && self.ageHigh() == '') {
            range = "older than " + self.ageLow();
        } else if (self.ageLow() == '' && self.ageHigh() != '') {
            range = "younger than " + self.ageHigh();
        } else if (self.ageLow() != '' && self.ageHigh() != '') {
            return "between " + self.ageLow() + " and " + self.ageHigh() + " years old";
        }
        return range;
    }, this);
}
$(document).ready(function () {
    var qvm = new QueryViewModel();
    ko.applyBindings(qvm);
});

任何想法?感谢。

旁注:我使用Twitter Bootstrap的CSS

Answer 1

你只需要重置你的ageHigh和ageLow属性为默认值时，age属性的变化和你的ageRange将自动更新你的文本。

您可以使用subscribe函数来侦听age对处理程序中的"reset"所做的更改:

self.age.subscribe(function () {
    self.ageLow('');
    self.ageHigh('');
});

演示JSFiddle。