【實用程式碼片段】將json資料繫結到html元素

標籤：使用   href   attr   nbsp   work   can   extend   程式碼片段   div   

jQuery擴充

jQuery.fn.extend({  ‘jsonBind‘:function(json){    var dom=this;    dom.find(‘[json-bind]‘).each(function(){      var val=$.trim(json[$(this).attr(‘json-bind‘)]);      if(val!=‘‘) $(this).html(val);    });    dom.find(‘[json-bind-attr]‘).each(function(){      var s=$(this).attr(‘json-bind-attr‘).split(‘|‘);      if($(this).attr(s[0]).indexOf(‘{%s}‘)>-1){        $(this).attr(s[0],$(this).attr(s[0]).replace(‘{%s}‘,json[s[1]]));      }else{        $(this).attr(s[0],json[s[1]]);      }    });  }});

使用方法

<ul>  <li json-bind="name"></li>  <li json-bind="year"></li>  <li json-bind="birth"></li>  <li json-bind="work"></li>  <li><a href="#" json-bind-attr="href|website" json-bind="website"></a></li>  <li><a href="http://zcc.ren/article/{%s}" json-bind-attr="href|article">來源</a></li></ul>

$(‘ul‘).jsonBind({‘name‘:‘canson‘,‘year‘:100,‘birth‘:‘1970-01-01‘,‘work‘:‘webfront‘,‘website‘:‘http://zcc.ren/‘,‘article‘:140});

 

【實用程式碼片段】將json資料繫結到html元素 （轉）