jQuery_jquery 기반 JavaScript 템플릿 엔진 JsRender 사용 가이드

머리말

JsRender는 jQuery를 기반으로 한 JavaScript 템플릿 엔진입니다.

· 단순하고 직관적

· 강력한 기능

· 확장 가능

· 번개처럼 빠르게

이러한 기능은 매우 강력해 보이지만 거의 모든 템플릿 엔진이 이와 같이 홍보합니다. . .

업무상의 필요로 인해 Xiaocai는 이 템플릿 엔진을 사용하게 되었습니다. 한동안 사용해본 결과 상대적으로 강력하다는 것을 알았지만 Xiaocai는 일부 부분이 너무 강력해서 이해하기 어렵다고 느꼈습니다.

반면에 JsRender의 공식 문서에는 비교적 자세한 정보가 있지만, 문제가 발생하면 기본적으로 관련 문제를 찾을 수 없을 뿐만 아니라 다른 정보도 거의 없습니다. 결과가 거의 없습니다.

게다가 JsRender의 일부 부분은 정말 이해하기 어렵기 때문에 Xiaocai는 긴급하게 "모범 사례"를 공유해야 합니다.

Xiaocai는 최근 사용을 바탕으로 몇 가지 실제 경험을 요약했습니다. 물론 이러한 경험은 공식 문서에서 찾을 수 없습니다.

참고: 이 글은 기본적인 입문용 튜토리얼이 아닙니다.

중첩 루프는 #parent를 사용하여 상위 데이터에 액세스합니다(권장하지 않음)

코드 복사 코드는 다음과 같습니다.

 
 
  
    
    
    
     스타일>
   머리>
  
    

      
        
          
             序号
             姓name
             가정집
          
         머리>
        
         본체>
       테이블>
    
    
    
    
    
    
       //数据源
       var dataSrouce = [{
         이름: "张三",
         가족: [
           "爸爸",
           "妈妈",
           "哥哥"
         ]
       },{
         이름: "이사",
         가족: [
           "爷爷",
           "奶奶",
           "叔叔"
         ]
       }];
       //渲染数据
       var html = $("#testTmpl").render(dataSrouce);
       $("#list").append(html);
    
   본문>
 

중첩 루프는 매개변수를 사용하여 상위 데이터에 액세스합니다(권장)

코드 복사 코드는 다음과 같습니다.

스타일>
머리>

                                                                                > ~ >                          >                                   >                                                                                      
>             
>          테이블>






//데이터 소스
var dataSrouce = [{
           이름: "张三",
          가족: [
"아빠"
"엄마"
"오빠"
]
},{
           이름: "lee思",
          가족: [
"할아버지",
"할머니",
"삼촌"
]
}];
//렌더링 데이터
      var html = $("#testTmpl").render(dataSrouce);
​​​​ $("#list").append(html);

본문>

맞춤 태그에 else 사용(권장하지 않음)

코드 복사 코드는 다음과 같습니다.

 
 
  
    
    
    
  
  
    

      
        
          
            
            
          
        
        
        
      

名称	单价

    

//데이터 소스
var dataSrouce = [{
          이름: "Apple",
가격: 108
},{
          이름: "얄리",
가격: 370
},{
           이름: "복숭아",
가격: 99
},{
          이름: "파인애플",
가격: 371
},{
          이름: "주황색",
가격: 153
}];
//맞춤 태그
$.views.tags({
"isShow": 기능(가격){
            var temp=price ''.split('');
If(this.tagCtx.props.status === 0){
                       // 가격이 수선화 갯수인지 판단하여 그렇다면 표시하고 그렇지 않으면 표시하지 않음
if(price==(Math.pow(parseInt(temp[0],10),3) Math.pow(parseInt(temp[1],10),3) Math.pow(parseInt(temp[2],10 ),3))){
                   return this.tagCtxs[0].render();
                }else{
                   return this.tagCtxs[1].render();
            }
              }그밖에{
              ""를 반환합니다.
           }
         }
});
//렌더링 데이터
      var html = $("#testTmpl").render(dataSrouce);
​​​​ $("#list").append(html);

본문>





맞춤 태그 대신 도우미 사용(권장)

코드 복사

코드는 다음과 같습니다.

 
 
  
    
    
    
  
  
    

      
        
          
            
            
          
        
        
        
      

名称	单价

    

//데이터 소스
var dataSrouce = [{
          이름: "Apple",
가격: 108
},{
          이름: "얄리",
가격: 370
},{
           이름: "복숭아",
가격: 99
},{
          이름: "파인애플",
가격: 371
},{
          이름: "주황색",
가격: 153
}];
​​​ //도우미
$.views.helpers({
"isShow": 기능(가격){
            var temp=price ''.split('');
if(price==(Math.pow(parseInt(temp[0],10),3) Math.pow(parseInt(temp[1],10),3) Math.pow(parseInt(temp[2],10 ),3))){
              true를 반환합니다.
              }그밖에{
               false를 반환합니다.
           }
         }
});
//렌더링 데이터
      var html = $("#testTmpl").render(dataSrouce);
​​​​ $("#list").append(html);

본문>




데모 코드 패키지 다운로드:
http://xiazai.jb51.net/201412/yuanma/JsRender_Demo(jb51.net).rar