Что хорошего шаблона взять JSON и присвоить различным атрибутам/innerHTML?

Question

Например здесь, позволяет делать вид, что есть программа, которая отправляет запрос Аякса в PHP файл, и нужно применить это значение, чтобы сделать такие вещи, как:

• Обновления формы входы
• Установите флажки
• Обновление innerHTML элементов

Допустим, приведенный ниже код здесь делает все, что, и это мило, но это не элегантный узор и ремонтопригодность это ужасно, если я работаю с более чем 10- 15 значений.

JSON будет просто: {"ID": "1", "gender":"M", .....etc..... }

Я сделал простой объект, чтобы спасти меня от необходимости писать селектор кучу раз, когда дело с формой.

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

После успешного вызова AJAX, чтобы получить данные, я придаю форма объекты один за другими и должна 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 в объект функций? Должен ли я сделать одну функцию для проверки всех типов? Должен ли я изменить свой JSON более описательным? Любые мысли о лучшем дизайне для этого?

Answer 1

Вы можете посмотреть в some templating lib s для jquery.

если вы хотите, чтобы свернуть свой собственный, что я хотел бы сделать это:

возвращение немного сложнее JSON как это:

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

таким образом, вы знаете, какой тип элемента это когда вас присвойте значения и можете вызвать правильный метод.

теперь ваша функция успеха может быть:

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 ... 
    } 
} 

это упрощает код на стороне клиента, но недостаток к этому способ делать вещи, что теперь ваш код на стороне сервера должен знать об элементах на вашей стороне клиента.