0

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

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

我使用淘汰赛，与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 这里展示了这个例子。当文本字段和选择都具有值时，将在它们下方添加一个新行并将它们重置为空。

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

有关此方法的问题示例，请尝试在文本框中输入内容并使用 tab 键移动到选择。然后尝试使用键箭头更改所选值。由于这将触发更改事件，因此将立即选择第一个选项。我在这里对这个特定问题有另一个问题

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

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

4

1 回答 1

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 秒足以在选项之间切换，因为油门计时器将在每次按键后重置。你可以在这里试试。

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

于 2013-08-19T17:06:07.840 回答