在 Knockout.js 中检测更改的选择选项的替代方法

Question

我有一个表单，用户应该在其中输入大量重复的数据实例，我希望用户能够以最小的努力做到这一点。它有点类似于巫师。

我希望用户在完成所有输入和选择后不需要单击单独的按钮，而是在表单完成时自动提交表单。

我使用带有options 绑定的淘汰赛。我目前的做法是使用敲除computed，它会检查表单中的所有字段，并在所有字段都具有有效值时自动提交。

我的实际表单和验证代码有点复杂，但这个简化的示例显示了我想要实现的目标：

<input type="text" id="theText" data-bind="value: text" />
<select id="theSelect" data-bind="options: options, value: selected, optionsText: 'text', optionsCaption: 'Please select'">
</select>
<div id="added" data-bind="foreach: added">
    <span data-bind="text: text"></span>:<span data-bind="text: selected.text"></span><br/>
</div>

以及对应的javascript：

function ViewModel() {
    var self = this; 

    this.text = ko.observable(''); 
    this.selected = ko.observable(null); 
    this.added = ko.observableArray([]);

    this.options = [{value: 1, text: "Number one"}, {value: 2, text: "Number two"}, {value: 3, text: "Number three"}]; 

    this.add = ko.computed(function() {
        var text = self.text(); 
        var selected = self.selected(); 
        if (text !== '' && selected) {
            self.added.push({
                text: text, 
                selected: selected
            }); 
            self.text(''); 
            self.selected(null); 
        }
    }); 
}

ko.applyBindings(new ViewModel()); 

jsFiddle here 显示此示例。当文本字段和选择都具有值时，将在它们下方添加一个新行并将它们重置为空。

这种方法或多或少有效，但有点神奇。当我尝试使此表单仅可用于键盘时，它也给我带来了一些问题（为用户提供更高的工作速度）。

有关此方法的问题示例，请尝试在文本框中输入内容并使用 Tab 键移动到选择。然后尝试使用键箭头更改所选值。由于这将触发更改事件，因此将立即选择第一个选项。 I have another question about this specific problem here

有没有更好的方法来实现淘汰赛中的自动提交时一切都有效？

我并不是要求对箭头键选择问题提供完整的解决方案，而只是要求我可以使用一些替代的起点。 ko.computed() 的替代品。

Answer 1

您可以通过使用 throttle 扩展器扩展 computed 来延迟启动它。这意味着在computed函数运行之前，用户将有一定的时间通过向上/向下键选择适当的选项。

this.add = ko.computed(function() {
    var text = self.text(); 
    var selected = self.selected(); 
    if (text !== '' && selected) {
        self.added.push({
            text: text, 
            selected: selected
        }); 
        self.text(''); 
        self.selected(null); 
    }
}).extend({ throttle: 1000 }); 

1 秒足以在选项之间切换，因为每次按键后油门计时器都会重置。你可以试试here。

附：我并不认为我的回答很有价值，但这是我对您的表单可能进行的改进的看法。此外，我认为我的改进对于只有少量选项（最多 7-10 个）的下拉菜单很有用。