Javascript テンプレートを HTML にレンダリングするために、dust.jsを使用しています。Dust.js を使用して、基本的にページをテンプレート コンポーネントに分割しました。テンプレート コンポーネントは、特定のイベントに応答して再レンダリングされます。そのようなコンポーネント/テンプレートの 1 つは、概念的に次のようになります。
[ラベル] [入力1] [入力2] [入力3]
このコンポーネントの 3 つの入力すべてに、他の入力の値を再計算するために使用される onBlur イベントがあり、テンプレートが再レンダリングされます。たとえば、ユーザーが Input1 の値を変更した場合、Input2 と Input3 の両方の値が調整され、再レンダリングされます。
値を設定するだけでなく、テンプレートを再レンダリングする理由は、値に応じてレンダリングされる追加のロジックと要素がテンプレートに含まれているためです (たとえば、特定の値によってエラー メッセージがレンダリングされたり、追加のフィールドが表示されたりする可能性があります)。 .
これまでのところは問題ありませんが、これによりフォーカスの問題が発生します。たとえば、ユーザーが Input1 を変更してから Input2 をクリックしたとします。onBlur がトリガーされ、Input2 と Input3 の値を更新してから、テンプレートを再レンダリングします。これにより、ユーザーのフォーカスが破棄され、Input2 を再度クリックする必要があります。
再レンダリングが完了した後にフォーカスを設定できるように、ユーザーが Input2 をクリックしたことを知る方法が必要です。onBlur イベントは onFocus の前にトリガーされるため、これを行う方法は考えられません。
テンプレートのレンダリングをバイパスする以外に解決策はありますか?