採用JSON並分配給各種屬性/ innerHTML的好模式是什麼？

例如，下面，讓我們假裝我們有發送Ajax請求的PHP文件的程序，並且需要應用它的數值做的事情，如：採用JSON並分配給各種屬性/ innerHTML的好模式是什麼？

更新表單輸入
組複選框
更新元素

的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*/ 
    } 
});

我總的感覺，這是可怕的，而我也許可以想出，做了很多檢查的功能，我不禁想出了很多不同的方式開始一個更優雅的解決方案，所以我甚至不知道如何優化這個方法。我應該將這些數據變成功能對象嗎？我應該做一個函數來檢查所有類型嗎？我應該改變我的JSON更具描述性？任何關於這個最佳設計的想法？

來源

2011-01-21 Incognito

查看http://weblogs.asp.net/scottgu/archive/2010/05/07/jquery-templates-and-data-linking-and-microsoft-contributing-to-jquery.aspx，特別是在雙向鏈接部分。 – 2011-01-21 15:47:14

你可以看看some templating lib爲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 ... 
    } 
}

這簡化了客戶端的代碼，但下行做事的方式是，現在你的服務器端代碼需要了解的元素上你的客戶端。

來源

2011-01-21 15:47:23 mkoryak

採用JSON並分配給各種屬性/ innerHTML的好模式是什麼？

回答

相關問題