인덱스 루프 인덱스 사용을 위한 JsRender에 대한 자세한 설명

이 문서의 예에서는 인덱스 루프 인덱스에 JsRender를 사용하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

JsRedner 및 JsViews(JsViews는 JsRender를 기반으로 한 추가 캡슐화입니다)는 차세대 Jquery 템플릿이라고 합니다. 공식 주소:

https:/ /github.com/BorisMoore/jsrender;
https://github.com/BorisMoore/jsviews.

루프는 템플릿 엔진의 필수적인 부분이며, 루프에 대해 이야기하면 중요한 요소인 인덱스가 탄생합니다.

사이클 횟수를 인덱스라 부르는데, 인덱스를 통해 현재 사이클의 횟수를 알 수 있습니다.

독자가 공식 문서를 읽었다면 다음과 같은 색인 획득 방법을 볼 수 있습니다.

데이터:

{
   names: ["Maradona","Pele","Ronaldo","Messi"]
}

템플릿 마크업:

{{for names}}

{{: #index+1}}.
{{: #data}}

{{/for}}

결과:

1. Maradona
2. Pele
3. Ronaldo
4. Mess

인덱스는 루프의 특수 리터럴 #index를 통해 얻을 수 있습니다. 특수 리터럴 #data는 이와 동일합니다. 이 경우 각 이름을 나타냅니다.

다음으로 약간의 트릭을 시도해 보겠습니다. 여전히 위의 예이지만 이번에는 M으로 시작하는 이름만 표시하고 싶습니다:

data:

{
 names: ["Maradona","Pele","Ronaldo","Messi"]
}

템플릿 마크업 :

{{for names}}
   {{if #data.indexOf("M") == 0}}
    

       {{: #index+1}}.
       {{: #data}}
    

   {{/if}}
 {{/for}}

결과:

Unavailable (nested view): use #getIndex()1. Maradona
Unavailable (nested view): use #getIndex()1. Messi

단순히 if 판단만 추가했는데 오류가 보고되었습니다!

문제는 #index에 있습니다. #index 대신 #getIndex()를 사용하라는 오류 메시지가 매우 명확합니다.

대체된 코드를 사용해 보세요.

데이터:

{
 names: ["Maradona","Pele","Ronaldo","Messi"]
}

템플릿 마크업:

{{for names}}
   {{if #data.indexOf("M") == 0}}
    
       {{: #getIndex()+1}}.
       {{: #data}}
    

   {{/if}}
 {{/for}}

결과:

1. Maradona
4. Messi

이게 왜요? 간단히 말하면, {{if }}가 일반 데이터 범위를 생성하지는 않지만 숨겨진 범위를 방해하기 때문입니다. 즉, {{if }}는 일반 데이터(전달한 데이터)의 가시성은 차단하지 않지만 숨겨진 데이터(#index, #parent)의 가시성은 방해합니다. 이는 단순한 이해이며, 표준이 아닌 이 프레임워크의 결함일 뿐이므로 세부적으로 설명할 필요가 없습니다.

따라서 이 기사는 독자에게 매우 중요한 결론을 제공합니다. 즉, #getIndex()를 사용하여 인덱스를 가져오고 애플리케이션이 충분히 간단하지 않은 경우 #index를 사용하지 않는 것입니다.

이 장이 모든 사람이 JsRender를 배우는 데 도움이 되기를 바랍니다. 더 많은 관련 튜토리얼을 보려면 jQuery 비디오 튜토리얼을 방문하세요.