juicer渲染列表

作者: Lyon0616 | 来源:发表于2017-01-05 15:42 被阅读0次

juicer渲染列表
第七节:React列表渲染与数据收集
第七节:React列表渲染与数据收集
art-template
【三维基因组】Hi-C call loops？-choose j
列表渲染
列表渲染
列表渲染
列表渲染
列表渲染

//假数据格式

var data={
  list:[
   {name:'水务集团',show:true,address:'https://zhidao.baidu.com/question/1541674174483734867.html'},
   {name:'视频监控',show:true,address:'https://zhidao.baidu.com/question/1541674174483734867.html'},
   {name:'滹沱河',show:true,address:'https://zhidao.baidu.com/question/1541674174483734867.html'},
   {name:'光伏发电',show:true,address:'https://zhidao.baidu.com/question/1541674174483734867.html'},
   {name:'武清水厂',show:true,address:'https://zhidao.baidu.com/question/1541674174483734867.html'},
   {name:'栾城水厂',show:true,address:'https://zhidao.baidu.com/question/1541674174483734867.html'}
  ],
 };

//按照上面假数据拼接
$.ajax({
      url : root+"/tree/parent.ajax",
      type:'post',
      dataType:'json',
      success:function(data){
//如果需要手动添加一条死数据
       var menulistData = [{name:'视频监控',objId:50,url:'http://221.238.241.250:81/portal/login_init.action'}];
       //console.log("菜单数据：",data);
//循环遍历每条数据对应值
       $.each(data,function(index,value){
        menulistData.push({name:value.text,objId: value.objId,url:'index.jsp?factoryId='+value.objId});
       })
       //console.log(menulistData," llallll");
//data 的格式
       var data={list:menulistData};
       var tpl=[
          '<ul>',
           '[@each list as it, k]',
            '<li><a href="$[it.url]">$[it.name]</a></li>',
           '[@/each]',
          '</ul>'
         ].join('\n');
          var content = juicer(tpl,data);
          $(".enhanchedBoxButton").append(content);

＊更改juicer里面符号

juicer.set({
     'tag::operationOpen': '[@',
     'tag::operationClose': ']',
     'tag::interpolateOpen': '$[',
     'tag::interpolateClose': ']',
     'tag::noneencodeOpen': '$$[',
     'tag::noneencodeClose': ']',
     'tag::commentOpen': '[#',
     'tag::commentClose': ']'
 });