객체 Syntax_javascript 기술을 위한 JsRender 소개

이 글에서는 객체에 대한 JsRender의 기본 구문을 간략하게 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

JavaScript 템플릿 엔진으로서 JsRender에는 루프 기능, 즉 for가 있어야 합니다. 그러나 JsRender는 너무 유연하기 때문에 실제로는 개체를 루프 개체로 받아들일 수 있습니다.

{{for Array}}와 {{for Object}}는 모두 허용됩니다. 배열을 순회하며 각 요소를 하나씩 꺼내는 {{for Array}}는 누구나 이해할 수 있습니다. 하지만 {{for Object}}는 다소 혼란스럽고 공식 문서에는 다른 설명 없이 도움이 되지 않는 예만 제시되어 있습니다.

처음에 Xiaocai는 {{for Object}}의 목적이 Object의 모든 속성을 순회하는 것이라고 생각했지만 신중하게 생각한 후에 이 함수 {{props Object}}의 기능을 구현했습니다. props 태그는 루프 수만큼 많은 속성을 탐색합니다. 각 루프에는 두 개의 숨겨진 속성이 있습니다. Key는 속성 이름을 나타내고 prop은 속성 값을 나타냅니다. 사용합니다.

실제로 {{for Object}}는 루프가 아닙니다. 즉, Handlebars.js에서와 마찬가지로 Object 환경에 들어가서 현재 컨텍스트를 Object로 설정하는 것을 의미합니다.

예:

데이터:

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

{
"title": "A팀",
"멤버": [
          {
"이름": "피트",
"city": "members_city",
"주소": {
"도시": "주소_도시",
"city1": "address_city1",
"city2": "address_city2"
}
}
]
}

템플릿 마크업:

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

{{회원용}}
{{주소용}}

.{{:도시}}

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

결과:

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

address_city

결과를 보면 멤버 항목 아래에 city 속성도 있지만 {{for address}}를 통해 주소가 가리키는 Object에 들어가기 때문에 {{:city}}를 직접 얻어오는 것을 알 수 있습니다. 주소.

동시에 주소에는 세 가지 속성이 있지만 결과는 한 줄만 출력합니다. 이는 {{for Object}}가 루프가 아니라 이를 전환한다는 것을 증명합니다.

이 기사가 JsRender 프로그래밍을 배우는 모든 사람에게 도움이 되기를 바랍니다.