jquery tmpl 템 플 릿(인 스 턴 스 설명)

8620 단어 jquerytmpl템 플 릿
이전에 템 플 릿 으로 렌 더 링 을 했 을 때 모두 angular 를 사 용 했 는데 본의 아니 게 jquery tmpl 이라는 경량급 을 발 견 했 습 니 다.그 문 서 는여기,이곳
이 플러그 인 에 대한 공식 설명:일치 하 는 첫 번 째 요 소 를 템 플 릿 으로 하고 render 가 지정 한 데 이 터 를 다음 과 같이 서명 합 니 다.

.tmpl([data,][options])
그 중에서 매개 변수 data 의 용 도 는 매우 뚜렷 하 다.render 에 사용 되 는 데 이 터 는 임의의 js 형식 으로 배열 과 대상 을 포함 할 수 있다.options 는 일반적인 상황 에서 모두 옵션 입 니 다.공식 적 으로 이 options 는 사용자 정의 키 값 이 맞 는 map 로 tmplItem 데이터 구 조 를 계승 하여 템 플 릿 render 동작 기간 에 적 용 됩 니 다.
여기,이곳최신 tmpl 플러그 인 을 다운로드 할 수 있 습 니 다.값 은 공식 적 으로 설명 되 었 습 니 다.tmpl 은 현재 베타 버 전 이 므 로 사용 에 신중 해 야 합 니 다.
다음은 간단 한 예 이다.

<!DOCTYPE html>
<html>
<head>
 <title>jquery template demo</title>
 <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="js/jquery.tmpl.js"></script>
 <script id="myTemplate" type="text/x-jquery-tmpl">
  <tr><td>${ID}</td><td>${Name}</td></tr>
 </script>
 <script type="text/javascript">
  $(function () {
   var users = [{ ID: 'hao1', Name: 'Tony' }, { ID: 'hao2', Name: 'Mary hui'}];
   $('#myTemplate').tmpl(users).appendTo('#rows');
  });
 </script>
 <style type="text/css">
  body
  {
   padding: 10px;
  }
  table
  {
   border-collapse: collapse;
  }
 </style>
</head>
<body>
 <table cellspacing="0" cellpadding="4" border="1">
  <tbody id="rows">
  </tbody>
 </table>
</body>
</html>
그 효 과 는 다음 과 같다.

템 플 릿 을 정의 할 때 추천 하 는 방식 은 정의 로 사용 합 니 다.

<script id='templateName' type='text/x-jquery-tmpl'></script>
템 플 릿 의 포장 기 이지 만 정의 방식 은 이것 만 있 는 것 이 아니 라 사용 할 수 있 습 니 다.

<div id="template" > <!-- markup --></div>
캐 시 템 플 릿 을 컴 파일 합 니 다.jQuery.tmpl()에 서 는 템 플 릿 을 미리 컴 파일 하고 캐 시 한 다음 에 적당 한 시기 에 사용 할 수 있 습 니 다.이것 은 일부 데이터 세트 에 유용 합 니 다.예 를 들 어:
HTML:

<table cellspacing="0" cellpadding="4" border="1">
 <tbody id="compileRows">
 </tbody>
</table>
JavaScript:

<script id="compile1" type="text/x-jquery-tmpl">
 {{tmpl 'cached'}}
 <tr><td>${ID}</td><td>${Name}</td></tr>
</script>
<script id="compile2" type="type/x-jquery-tmpl">
 <tr><td colspan="2">${Group}</td></tr>
</script>
<script type="text/javascript">
 $(function () {
  var groupUsers = [{ ID: 'hao1', Name: 'Tony', Group: 'Administrators' }, { ID: 'hao2', Name: 'Mary hui', Group: 'Users'}];
  $('#compile2').template('cached');
  $('#compile1').tmpl(groupUsers).appendTo('#compileRows');
 });
</script>
그 효 과 는 다음 과 같다.

$.template()방법,Html 을 템 플 릿 으로 컴 파일 합 니 다.예제:
JavaScript

var markup = '<tr><td>${ID}</td><td>${Name}</td></tr>';
$.template('template', markup);
$.tmpl('template', users).appendTo('#templateRows');
이렇게 하면 markup 에서 정의 하 는 템 플 릿 을 templateRows 대상 에 적용 할 수 있 습 니 다.
jQuery.tmpl()의 태그,표현 식,속성:
${}:앞의 예 를 들 어 이 탭 의 역할 이 뚜렷 합 니 다.자리 표시 자 에 해당 하지만 다른 쓰기 가 있 습 니 다{{=field}:

<script id="myTemplate" type="text/x-jquery-tmpl">
 <tr><td>{{= ID}}</td><td>{{= Name}}</td></tr>
</script>
반드시 주의해 야 할 것 은"="호 뒤에 반드시 빈 칸 을 따라 야 한다.그렇지 않 으 면 효과 가 없다.
jQuery.tmpl()은 두 가지 유용 한 속성 이 있 습 니 다:$item,$data:
$item 은 현재 템 플 릿 을 대표 합 니 다.$data 는 현재 데 이 터 를 대표 합 니 다.
Html

<table cellspacing="0" cellpadding="4" border="1">
  <tbody id="propertyRows">
  </tbody>
 </table>
Javascript

<script id="property" type="text/x-jquery-tmpl">
 <tr><td>${ID}</td><td>${$data.Name}</td><td>${$item.getLangs('; ')}</td></tr> </script>
<script type="text/javascript">
  $(function () {
  var userLangs = [{ ID: 'hao1', Name: 'Tony', Langs: ['PHP', 'Python'] }, { ID: 'hao2', Name: 'Mary hui', Langs: ['Java', 'C#']}];
  $('#property').tmpl(userLangs, {
   getLangs: function (separator) {
    return this.data.Langs.join(separator);
   }
   }).appendTo('#propertyRows');
  });
</script>

{{each}}이 탭 을 보면 순환 용 으로 사용 되 는 것 을 알 수 있 습 니 다.용법 은 다음 과 같 습 니 다.(키워드{each Array},$value,$index)
HTML

<ul id="ul_each"></ul>
Javascript

<script id="eachList" type="text/x-jquery-tmpl">
 <li class="li">
 <span class="a">ID: ${ID};</span>
 <span class="b">Name: ${Name};</span><br/>
 <span class="c">Langs:
  <ul>
  {{each Langs}}
   <li>
   ${$index + 1}:${$value}.
   </li>
  {{/each}}
  </ul>
 </span>
 </li>
</script>
<script type="text/javascript">
 $(function () {
 var userLangs = [{ ID: 'hao1', Name: 'Tony', Langs: ['PHP', 'Python'] }, { ID: 'hao2', Name: 'Mary hui', Langs: ['Java', 'C#']}];
 $('#eachList').tmpl(userLangs).appendTo('#ul_each');
 });
</script>
그 효 과 는 다음 과 같다.

{{each}}또 다른 표기 법 이 있 습 니 다.
Javascript

<script id="eachList2" type="text/x-jquery-tmpl">
 <li class="li">
 <span class="a">ID: ${ID};</span>
 <span class="b">Name: ${Name};</span><br/>
 <span class="c">Langs:
  <ul>
  {{each(i,lang) Langs}}
   <li>
   ${i+1}:${lang}
   </li>
  {{/each}}
  </ul>
 </span>
 </li>
</script>
작용 은 앞의 것 과 같다.
{{if}}과{{else},이 두 탭 은 한눈 에 알 수 있 을 것 입 니 다.바로 예제 에 올 립 니 다.
Javascript

<script id="ifelse" type="text/x-jquery-tmpl">
  <tr>
  <td>${ID}</td>
  <td>${Name}</td>
  <td>
   {{if Langs.length > 1}}
    ${Langs.join('; ')}
   {{else}}
    ${Langs}
   {{/if}}
  </td>
 </tr>
</script>
Langs 배열 요소 가 1 개 를 초과 하면';'연결 하지 않 으 면 Langs 를 직접 표시 합 니 다.효 과 는 다음 과 같 습 니 다.

{{html},대상 속성 값 을 HTML 코드 로 대체 합 니 다.
$.tmplItem()방법,이 방법 을 사용 하면 render 에서 나 온 요소 에서$item 을 다시 가 져 올 수 있 습 니 다.예제:

$('tbody').delegate('tr', 'click', function () {
 var item = $.tmplItem(this);
 alert(item.data.Name);
});
효 과 는 다음 과 같 습 니 다:

이상 의 jquery tmpl 템 플 릿(인 스 턴 스 설명)은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 여러분 들 이 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.
vue-resource 를 사용 하여 데이터 상호작용 을 하 는 실례
간이 타 상 기능 의 실례 를 자제 하 다

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage