1

私は素晴らしい新しいデータリンクプラグインを活用した簡単なアドレスフォームを持っています。これは、ajax呼び出しを実行して、IDが存在する場合はフォームに入力し、存在しない場合は空白のフォームに入力する単純な作成/編集シナリオです。

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

上記の関数はどちらの場合も呼び出され、フォームをstep1Dataオブジェクトにリンクします（フォームに入力するものがない場合は、空のJavaScriptオブジェクトを渡します）。上に表示されている「Templates」オブジェクトは、すばらしいjQueryTemplatesプラグインを使用する単純なラッパーです。

これは編集時にうまく機能します。.link（）はフォームに完全に準拠しており、すべてが正常でダンディです。空のフォームを処理するときに問題が発生します。状態選択リストを除くすべてのフィールドがリンクされています。選択リストのhtmlは次のとおりです。

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

クラスとIDの命名規則はフォームの他の部分と同じですが、データリンク自体はそれを認識していないようです。私はおそらく手動でそうするようにそれを構成することができました、しかし私がそれで逃げることができるならば私は清潔さのためにそれを望まないでしょう。選択リストにリンクしない理由はありますか？

4

1 に答える 1

0

わかりました。Schalck によるこの非常に詳細な記事によると、Data Link を使用して空のフォームをオブジェクトにバインドする場合、ドキュメントは実際には正確ではない動作を暗示しています。

基本的に、Data Link はリンクとイベントを設定して、オブジェクト内にプロパティを作成するだけです。change イベントがトリガーされるまで、実際にはそれらの間の双方向同期は実行されません。言い換えれば、ユーザーが実際にフォーム フィールドに何かを入力するまでです。

この動作は、ほとんどのコントロールで問題ありません (また、パフォーマンス上の理由から、ユーザー入力を待機することは非常に理にかなっています)。問題は、現在のドキュメントがそうではないことを暗示していることです。それを念頭に置いて、次のように .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トラバーサルはform -> ul -> li ->inputsです）。

    $('.stepForm').children().children('input').trigger('change')
于 2011-02-16T03:53:55.933 に答える