在jQuery中爲json數組生成html的標準方法

我正在嘗試爲json返回的用戶數組生成html ..我想按照以下方式執行此操作，但我不覺得這是非常有效的方法來執行此操作工作。請查看以下代碼並告訴我是否應該使用一些模板代碼或者是否存在此場景的任何標準？在jQuery中爲json數組生成html的標準方法

    success: function(e){ 
     console.log(e); 
     console.log(e.d[0].UserName); 

     var position2= $("#searchtextbox").position(); 
     $('<div/>', 
     { 
      id:'generatedsearchdiv', 
      css:{ 
       position:'absolute', 
       left:position2.left, 
       top:position2.top+20 
       } 

     }).appendTo('#searchArea'); 

     for (var i=0; i<=e.d.length; i++) 
     { 
     $('<div/>', 
      { 

      html:"<span>"+e.d[i].UserName+"<span>" 
      }).appendTo('#generatedsearchdiv'); 

     } 

     }

來源

2013-04-15 Spirals Whirls

......你的JSON是什麼樣的？ –

從asp.net中的Webservice返回的用戶對象數組，用戶具有Name，ImageUrl和UserId屬性。 –

您是否在尋找類似KnockoutJS的東西http://knockoutjs.com/它允許您將JSON綁定到HTML模板？ – bUKaneer

您可以使用jQuery的模板去爲這個..

來源

2013-04-15 16:18:10

是的，我認爲這是我想要的.. –

URL：https：//github.com/jquery/jquery-tmpl – powerbuoy

jsrender的替代https://github.com/BorisMoore/jsrender –

這種方法是HTML的小位「好」，就像<span>{data}</span>。但是，如果您擁有的不僅僅是這些，那麼使用模板解決方案確實是可維護性的最佳選擇。檢查出this answer的選項。

來源

2013-04-15 16:21:10

是的我喜歡整潔的代碼..上面的方式似乎凌亂，絕對這個代碼將增長.. –

我還沒有在當前的模板解決方案上出售。

String.prototype.format = function() { 
    var pattern = /\{\d+\}/g; 
    var args = arguments; 
    return this.replace(pattern, function(capture) {return args[capture.match(/\d+/)]; }); 
}

您可以定義格式的字符串，像這樣：

var formatHTML = '<span>{0}</span>';

然後使用它是這樣的，如果你不要麼，你可以，如果你把這個代碼內嵌得到一個快速的字符串格式：

$('#generatedsearchdiv').append(formatHTML.format(e.d[i].UserName));

來源

2013-04-15 18:14:51

謝謝... :) ..愛這個 –

在jQuery中爲json數組生成html的標準方法

回答

相關問題