javascript - 挖空选择和文本框共享绑定(bind)

Question

我有一个页面，其中有一个选择框和一个输入框被绑定(bind)到相同的值。这个想法是，通常人们会从选择中选择一个值，但是，用户也应该能够在输入框中输入任意字符串。问题是，如果我输入的内容不存在于选择中，由于绑定(bind)，该值将设置为选择中的第一项。

这是我想要实现的行为:

用户从 select 中选择值

1. 已将值设置为所选项目。
2. 输入已更新为所选值。

用户在input中输入文本

1. 值设置为输入的文本。
2. 选择不会更改除非值存在于可用值的集合中。

换句话说，我想要的是最后更改的控件是有效值。但我也希望这两个控件都是最新的只要给定值对该控件有效。

我的代码是这样的:

js

var viewModel = { Value: ko.observable('1'), Set: ['1', '2', '3'] };
ko.applyBindings(viewModel);

html

<!-- ko if: Set.length > 1 || (Set.length > 0 && Set[0] != '') -->
<select type="text" class="form-control input-small" data-bind="options: Set, value: Value">
</select>
<!-- /ko -->

<input class="form-control input-small" data-bind="value: Value" style="margin-top: 5px;" />

这里是一个 jsfiddle 显示代码当前如何工作:http://jsfiddle.net/b2RwG/

[编辑]
我找到了一个可行的解决方案 ( http://jsfiddle.net/b2RwG/2/ )，但它确实不太好，必须有更好的方法来解决这个问题。

Answer 1

如您所见，我添加了一个绑定(bind)到文本输入的 inputValue 可观察对象。 我还添加了一个计算命名的 virtualSet，其中包含原始项目和新项目(来自文本输入)。 我订阅了 inputValue，以便在您输入时自动设置选择。

var viewModel = {    
    inputValue: ko.observable('1'),
    Value: ko.observable('1'),
    Set: ['1', '2', '3']    
};
viewModel.virtualSet = ko.computed({
    read: function () {
        var vs = this.Set.slice(0);
        if (this.inputValue() && this.inputValue().length)
             vs.unshift(this.inputValue());
        return vs;
    },
    owner: viewModel
});
viewModel.inputValue.subscribe(function (value) {
    viewModel.Value(value);
});

See fiddle

希望对你有帮助。