替代方法來檢測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表示本實例。當文本字段和select都有值時，將在它們下面添加一個新行，並將它們重置爲空。

這種方法或多或少的作品，但它有點神奇。當我嘗試使這種形式僅使用鍵盤可用時（爲了使用戶的工作速度更快），它也給了我一些問題。

有關此方法問題的示例，請嘗試在文本框中輸入內容並使用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。

P.S.我不認爲我的答案是有價值的，但這是我對可能改進您的表單的看法。此外，我認爲我的改進對於只有少量選項（最多7-10）的下拉菜單很有用。