jQueryデータリンクが選択リストを処理していない

Question

私は素晴らしい新しいData Linkプラグインを利用して簡単なアドレス形式を使用しています。シンプルな作成/編集シナリオで、ajax呼び出しを実行してIDが存在する場合はフォームに、そうでない場合は空白のフォームに移入します。

dataComplete : function(data){ 
     $self.step1Data = data; 
     $self.Templates.step1('#step1form', $self.step1Data); 
     $('#step1form').link($self.step1Data); 
    } 

上記の関数は（私は、フォームを埋めるために何を持っていない場合、私はちょうどそれに空のJavaScriptのオブジェクトを渡す）step1Dataオブジェクトにフォームをリンクするために、いずれの場合においても呼ばれています。上記の 'Templates'オブジェクトは、素晴らしいjQuery Templatesプラグインを使用する単純なラッパーです。

これは動作します偉大な編集時。 .link（）はフォームに完全に準拠しており、すべてが上品で素敵です。空のフォームを扱うときに問題が発生します：州選択リストを除くすべてのフィールドがリンクされています。は、ここで選択したリストは、HTMLの：

<select class="state" id="State" name="State"> 
    <option value="UT">Utah</option> 
</select> 

は、クラスとidの命名規則は、フォームの他の部分と同じですが、データリンクは、それ自身でそれを気づいていないようです。私はおそらくそれを手動で行うように設定することができますが、清潔さのために私がそれを取り除くことができないようにしたいと思います。 なぜ選択リストにリンクしていないのでしょうか？

Answer 1

わかりました。 Schalckのthis very detailed articleによると、Data Linkを使用して空のフォームをオブジェクトにバインドすると、ドキュメンテーションは実際には正しくない動作を意味します。

データリンクは、オブジェクト内のプロパティを作成するためにリンクとイベントのみを設定します。 変更イベントがトリガーされるまで、実際には双方向の同期は行われません。言い換えると、ユーザーが実際にフォームフィールドに何かを入力するまでです。

この動作は、ほとんどのコントロールで可能です（パフォーマンス上の理由から、ユーザーの入力を待つのが大変です）。 問題は、現在のドキュメントには別途が含まれているということです。このことを念頭に置いて、私は単純にそうよう）（.linkを呼び出した後、フォームで選択リストの変更イベントをトリガー：

dataComplete : function(data){ 
     $self.step1Data = data; 
     $self.Templates.step1('#step1form', $self.step1Data); 
     $('#step1form').link($self.step1Data); 

     //trigger the select lists 
     $('[name=State]').trigger('change'); 
     $('[name=Type]').trigger('change'); 
    } 

あなたは、単にフォームの入力フィールドを反復処理し、すべて引き起こす可能性必要に応じて、変更イベントを通知します。以下は1つの方法ですが、私は良い方法があると確信しています（DOM traversalはフォーム - > ul - > li - >の入力です）。

$('.stepForm').children().children('input').trigger('change')