Question

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

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

我使用敲除，options绑定。我目前的方法是使用knockout 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

您可以通过使用computed扩展程序扩展throttle来延迟启动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}}

1秒就足以在选项之间切换，因为节流计时器将在每次按键后重置。你可以尝试here。

P.S。我并不认为我的答案很有价值，但我认为这可能会改善您的表格。此外，我认为我的改进只适用于少量选项的下拉菜单（最多7-10）。

另一种检测Knockout.js中更改的选择选项的方法

1 个答案: