Какой хороший шаблон взять JSON и назначить различным атрибутам / innerHTML?

Question

Например, давайте представим, что у нас есть программа, которая отправляет запрос ajax в файл 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 для получения данных я назначаю объекты формы один за другим и должен рассмотреть, какой тип формыЭлемент, который я обновляю, с жестко заданными настройками.

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

Вы можете посмотреть некоторые шаблоны 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 ...
    }
}

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