>웹 프론트엔드 >JS 튜토리얼 >template_jquery를 사용하여 HTML을 생성하기 위한 프레임워크인 jquery.tmpl 사용에 대한 자세한 설명

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB원래의
2016-05-16 16:21:361197검색

페이지 업데이트를 위한 동적 데이터 요청은 블로그 댓글의 페이징 동적 로드, 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을 검색할 수 있습니다.

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


    성명:
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.