JsRender 실용 입문 tutorial_javascript 기술

이 기사는 JsRender에 대한 실용적인 입문 튜토리얼입니다. 예제에서는 else 태그, 중첩 루프를 사용하여 상위 데이터 및 기타 지식 포인트에 액세스하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

머리말

JsRender는 jQuery를 기반으로 한 JavaScript 템플릿 엔진으로 다음과 같은 기능을 가지고 있습니다.

· 단순하고 직관적

· 강력한 기능

· 확장 가능

· 번개처럼 빠르게

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

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

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

게다가 JsRender의 일부 부분은 정말 이해하기 어렵기 때문에 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();
               }그밖에{
                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);

       

 
본문>




전체 예제 코드를 보려면 여기를 클릭하세요

이 사이트에서 다운로드하세요.

이 기사가 JsRender 프로그래밍을 배우는 모든 사람에게 도움이 되기를 바랍니다.