JSONを使用してさまざまな属性/ innerHTMLに割り当てるのに適したパターンは何ですか？ここで例えば

Question

は、我々はPHPファイルへのAjaxのリクエストを送信するプログラムを持っているふりをすることができます、そしてそれはのようなものを行うに値だ適用する必要があります。

• 更新フォーム入力を
• 設定のチェックボックス
私は以上の10〜で働いている場合の要素

のinnerHTMLのは、ここに以下のコードはすべてのことをして言うと、それは素敵なのですが、それはそれの優雅なパターンと保守性ではないことができます

更新がひどいです15の値。

JSONはただ単になります{"ID": "1", "gender":"M", .....etc..... }

私は、フォームを扱うときにセレクタを何回の束を記述することから私を保存するための単純なオブジェクトを作りました。成功したAJAX呼び出した後

var dataVars = { 
    phone  : $("#Phone1_input"), 
    gender  : $("#Gender_input"), 
    birthdate : $("#BirthDate_input"), 
    chk01  : $("#chk01"), 
    chk02  : $("#chk02"), 
    chk03  : $("#chk03") 
    /*Imagine 30 more lines of this*/ 
} 

がデータを取得するために、私は、フォームが1つずつオブジェクトを割り当てると、私はハードコーディングされた設定で更新していますフォーム要素の種類をconsidderする必要があります。

$.ajax({ 
    url: "./whatever", dataType: "json", type: "post", 
    success: function (data) { 
     dataVars.phone.text(data.ID);    //text/innerHTML 
     dataVars.gender.val(data.CreationDate);  //Value attribute 
     dataVars.birthdate.val(data.UserName); 
     dataVars.chk01.attr('checked',data.chk01); //Checkbox attribute 
     dataVars.chk02.attr('checked',data.chk02); 
     dataVars.chk03.attr('checked',data.chk03); 
     /*Imagine 30 more lines of this*/ 
    } 
}); 

私は、これはひどいです一般的な感覚を持っている、と私はおそらくチェックの多くを行う機能を思い付くことができながら、私は助けることがオフに開始するためにさまざまな方法の多くを思い付くことができませんより洗練されたソリューションなので、私は実際にこれを最適化することでどのような道を取るべきかも知らない。そのdataVarsを関数のオブジェクトにする必要がありますか？すべてのタイプをチェックする1つの関数を作成する必要がありますか？ JSONをよりわかりやすいものに変更する必要がありますか？これのための最善のデザイン上の任意の考えですか？

Answer 1

jqueryについては、some templating libを調べることができます。

あなたがあなた自身をロールバックしたい場合は、私は何だろうことはこれです：あなたはときに、これはある要素の種類を知っているこのよう

[ 
{'type':'checkbox', 'id':'theId', 'val':'value'}, 
{'type':'container', 'id':'theId', 'val':'value'}, 
... 
] 

：このような

リターン少し複雑JSON値を割り当て、適切なメソッドを呼び出すことができます。

今あなたの成功の機能は次のようになります。

function(data){ 
    $.each(data){ 
     var $it = $("#"+this.id); 
     if(this.type === "checkbox"){ 
      if(this.value) { 
       $it.attr("checked", "checked"); 
      } else { 
       $it.removeAttr("checked"); 
      } 
     } else if(type === "container"){ 
      $it.html(this.value); 
     } else if(type ==- "input"){ 
      //todo 
     } else if ... 
    } 
} 

これは、クライアント側のコードを簡素化しますが、物事のこのように欠点は現在、サーバー側のコードは、上の要素について知る必要があることですあなたのクライアント側。