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对＆＃34;重置＆＃34;的更改。在处理程序中：

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

演示JSFiddle。

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

1 个答案: