template_jquery를 사용하여 HTML을 생성하기 위한 프레임워크인 jquery.tmpl 사용에 대한 자세한 설명

페이지 업데이트를 위한 동적 데이터 요청은 블로그 댓글의 페이징 동적 로드, Weibo의 롤링 로드 및 예약된 요청 로드 등과 같은 요즘 매우 일반적인 방법입니다.

이 경우 동적 요청에 의해 반환되는 데이터는 일반적으로 HTML, JSON 또는 XML로 구성됩니다. 즉, 데이터는 브라우저 측에서 구성되지 않고 서버 측에서 구성됩니다. 그러나 HTML을 반환하는 것은 전송량 측면에서 비용 효율적이지 않으며, 웹 전송 측면에서는 이제 XML보다 JSON이 더 많이 사용됩니다.

브라우저 측에서 JSON을 기반으로 HTML을 생성할 때 매우 귀찮은 부분은 구조가 복잡하지 않으면 괜찮지만 일단 구조가 복잡해지면 정말 악몽이 된다는 점입니다. 유지 관리가 거의 불가능한 코드입니다.

그래서 템플릿을 이용해 HTML을 생성하는 프레임워크가 속속 등장했는데, 그 중 jquery.tmpl의 사용법을 자세히 소개하겠습니다

다음은 사용 방법에 중점을 둡니다:

먼저 템플릿과 데이터를 소개하겠습니다. 말할 것도 없이 이 두 가지는 꼭 필요합니다

템플릿을 정의하는 방법에는 두 가지가 있습니다. 구체적인 코드는 다음과 같습니다

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

var markup = "

일부 콘텐츠: ${item}.
" " 추가 콘텐츠: ${myValue}.

";
$.template( "movieTemplate", markup );

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

이런 식으로 두 개의 템플릿이 정의되는데 전자는 스크립트로 작성되고 후자는 html로 작성됩니다

데이터는 json을 사용합니다

아래 템플릿 렌더링을 시작하세요

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

$( "#movieTemplate" ).tmpl( 영화 ).appendTo( "#movieList" );

$.tmpl( "movieTemplate", 영화 ).appendTo( "#movieList" );

참고: 영화는 json 데이터 배열입니다

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

var 영화 = [

{ 이름: "The Red Violin", 출시 연도: "1998" },
{ 이름: "Eyes Wide Shut", 출시 연도: "1999" },
{ 이름: "상속", 출시 연도: "1976" }
];

jquery.tmpl의 몇 가지 공통 태그는 다음과 같습니다.

${}, {{각}}, {{if}}, {{else}}, {{html}}

자주 사용되지 않는 태그

{{=}},{{tmpl}} 및 {{wrap}}.

${}는 {{=}}와 동일하며 출력 변수입니다. 표현식은 ${}에도 배치할 수 있습니다(=와 변수 사이에 공백이 있어야 합니다. 그렇지 않으면 유효하지 않습니다)

예:

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

{{each}}는 루프 논리를 제공하며 $value는 반복 변수(i, value)를 사용자 정의할 수도 있습니다.

예:

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

        {{if i==0}}
           

그룹

            {{각(j,그룹)개 그룹}}
               

${group.name}

            {{/각}}
        {{/if}}
    {{/각}}
   

출발

    {{각 출발}}
       

{{= $value.name}}

    {{/각}}
스크립트>

{{if }} {{else}}提供了分支逻辑 {{else}} 엇当于else if

示例：

复主代码 代码如下:

스크립트>

{{html}} 输流变weighthtml,但是没有html编码，适合输udehtml代码

 实例

复主代码 代码如下:

스크립트>

{{tmpl}} 嵌套模版

实例

复主代码 代码如下:

    

{{wrap}},包装器

实例

复主代码 代码如下:

   

       

두

       

            그리고 더 콘텐츠...
       

    {{/wrap}}
   

 

$data $item $item代表当前的模板;$data代表当前的数据。

 实例：

复主代码 代码如下:

스크립트>

$.tmplItem() 메서드, 이 메서드를 사용하면 렌더링된 요소에서 $item을 검색할 수 있습니다.

예

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