0

ユーザーがデータのインスタンスを何度も繰り返し入力する必要があるフォームがあり、ユーザーが最小限の労力で入力できるようにしたいと考えています。ウィザードに少し似ています。

1 つのインスタンスに対してすべての入力と選択が完了したときに、ユーザーが別のボタンをクリックする必要がなく、フォームが完成したときにフォームが自動的に送信されることを願っています。

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 。テキスト フィールドと選択フィールドの両方に値がある場合、それらの下に新しい行が追加され、空にリセットされます。

このアプローチは多かれ少なかれ機能しますが、少し魔法のようです。また、このフォームをキーボードのみで使用できるようにしようとすると、いくつかの問題が発生しました (ユーザーの作業速度を向上させるため)。

このアプローチの問題の例として、テキストボックスに何かを入力して、タブキーを使用して選択に移動してみてください。次に、選択した値を矢印キーで変更してみます。これにより変更イベントが発生するため、最初のオプションがすぐに選択されます。ここでこの特定の問題について別の質問があります

ノックアウトですべてが有効な場合に自動送信を実現するためのより良い方法はありますか?

矢印キーの選択に関する問題の完全な解決策を求めているのではなく、私が作業するための代替の出発点を求めているだけです。の代替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 に答える