jQuery_jquery 기반 JavaScript 템플릿 엔진 JsRender 사용 가이드-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

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

May 16, 2016 pm 04:23 PM

javascript

머리말

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

· 단순하고 직관적

· 강력한 기능

· 확장 가능

· 번개처럼 빠르게

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

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

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

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

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

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

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

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

 <!DOCTYPE html>

 <html>

     <meta charset="utf-8">

     <title>嵌套循环使用#parent访问父级数据 --- by 杨元</title>

     <스타일>

     </스타일>

   </머리>

     <div>

       <테이블>

           <tr>

             <th width="10%">序号</th>

             <th width="10%">姓name</th>

             <th width="80%">가정집</th>

           </tr>

         </머리>

         <tbody id="list">

         </본체>

       </테이블>

     </div>

     <script src="jquery.min.js"></script>

     <script src="jsviews.js"></script>

     <!-- 정의JsRender模版 -->

     <script id="testTmpl" type="text/x-jsrender">

       <tr>

         <td>{{:#index 1}}</td>

         <td>{{:이름}}</td>

         <td>

           {{가족용}}

             {{!-- 利사용#parent访问父级index --}}

             <b>{{:#parent.parent.index 1}}.{{:#index 1}}</b>

             {{!-- 利사용#parent访问父级数据，父级数据保存재데이터属性中 --}}

             {{!-- #data相当于this --}}

             {{:#parent.parent.data.name}}的{{:#data}}

           {{/for}}

         </td>

       </tr>

       //数据源

       var dataSrouce = [{

         이름: "张三",

         가족: [

           "爸爸",

           "妈妈",

           "哥哥"

         ]

       },{

         이름: "이사",

         가족: [

           "爷爷",

           "奶奶",

           "叔叔"

         ]

       }];

       //渲染数据

       var html = $("#testTmpl").render(dataSrouce);

       $("#list").append(html);

   </본문>