이 기사는 JSRender에 대한 실질적인 소개 자습서이며, 예제는 태그 사용 및 루프 중첩 된 부모 데이터 액세스와 같은 지식 포인트를 설명합니다. 참조를 위해 공유하십시오. 세부 사항은 다음과 같습니다.
머리말
JSRender는 jQuery를 기반으로 한 JavaScript 템플릿 엔진입니다. 다음과 같은 기능이 있습니다.
・ 단순하고 직관적입니다
・ 강력합니다
・ 확장 가능
lightning만큼 빨리
이러한 기능은 놀랍게 보이지만 거의 모든 템플릿 엔진은 이와 같이 광고 될 것입니다. . .
작업 요구로 인해 Xiaocai는이 템플릿 엔진과 접촉했습니다. 한동안 그것을 사용한 후, 나는 그것이 실제로 매우 강력하다는 것을 알았지 만 Xiaocai는 일부 장소가 너무 강력하다고 생각하여 사람들이 이해하기 어렵다고 생각합니다.
반면에 JSRENDER의 공식 문서는 비교적 상세하지만 놀랍게도 다른 정보는 거의 없습니다. 문제가 발생하면 기본적으로 검색 할 수 없습니다. 관련 문제를 찾을 수있을뿐만 아니라 결과는 거의 없습니다.
또한 JSRENDER의 일부는 실제로 이해하기가 어렵 기 때문에 공유하려면 몇 가지 "모범 사례"가 필요합니다.
최근의 사용을 바탕으로 Xiaocai는 몇 가지 실용적인 경험을 요약했으며 물론 이러한 경험은 공식 문서에서 찾을 수 없습니다.
#parent (권장되지 않음)를 사용하여 부모 데이터에 액세스하기위한 중첩 루프
다음과 같이 코드를 복사하십시오. <! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<title> 부모 데이터에 액세스하기 위해 #parent를 사용하는 중첩 루프 ---의 Yang Yuan </title>
<스타일>
</스타일>
</head>
<body>
<div>
<테이블>
<헤드>
<tr>
<th> 일련 번호 </th>
<th> 이름 </th>
<Th> 가족 구성원 </th>
</tr>
</head>
<tbody id = "list">
</tbody>
</테이블>
</div>
<script src = "jquery.min.js"> </script>
<script src = "jsviews.js"> </script>
<!-JSRender 템플릿을 정의하십시오
<script id = "testtmpl"type = "text/x-jsrender">
<tr>
<td> {{:#index + 1}} </td>
<td> {{: name}} </td>
<td>
{{for family}}
{{!-#parent를 사용하여 부모 색인에 액세스합니다-}}
<b> {{:#parent.parent.index + 1}}. {{:#index + 1}} </b>
{{!-#parent를 사용하여 부모 데이터에 액세스하면 부모 데이터가 데이터 속성에 저장됩니다.}}
{{!-#data는 이것과 같습니다-}}
{{: #data}}의 {{: #data}}}
{{/을 위한}}
</td>
</tr>
</스크립트>
<cript>
// 데이터 소스
var dataSrouce = [{
이름 : "Zhang San",
가족: [
"아빠",
"어머니",
"형제"
]]
}, {
이름 : "Li Si",
가족: [
"할아버지",
"할머니",
"삼촌"
]]
}];
// 데이터 렌더링
var html = $ ( "#testtmpl"). render (dataSrouce);
$ ( "#list"). 부록 (html);
</스크립트>
</body>
</html>
매개 변수를 사용하여 부모 데이터에 액세스하기위한 중첩 루프 (권장)
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<title> 중첩 루프는 매개 변수를 사용하여 부모 데이터에 액세스합니다 ---의 Yang Yuan </title>
<스타일>
</스타일>
</head>
<body>
<div>
<테이블>
<헤드>
<tr>
<th> 일련 번호 </th>
<th> 이름 </th>
<Th> 가족 구성원 </th>
</tr>
</head>
<tbody id = "list">
</tbody>
</테이블>
</div>
<script src = "jquery.min.js"> </script>
<script src = "jsviews.js"> </script>
<!-JSRender 템플릿을 정의하십시오
<script id = "testtmpl"type = "text/x-jsrender">
<tr>
<td> {{:#index + 1}} </td>
<td> {{: name}} </td>
<td>
{{!- For Loop을 사용하는 경우 나중에 매개 변수를 추가 할 수 있습니다. 매개 변수는 ~부터 시작해야하며 여러 매개 변수는 공백으로 분리됩니다.}}
{{!- 매개 변수를 통해 부모 데이터를 캐시합니다. Child Loop의 매개 변수에 액세스하면 부모 데이터에 간접적으로 액세스 할 수 있습니다.}}
{{가족의 경우 ~ parentindex =#index ~ parentname = name}}
<b> {{: ~ parentindex + 1}}. {{:#index + 1}} </b>
{{!-#data는 이것과 같습니다-}}
{{: #data}}의 {{: ~ parentname}}
{{/을 위한}}
</td>
</tr>
</스크립트>
<cript>
// 데이터 소스
var dataSrouce = [{
이름 : "Zhang San",
가족: [
"아빠",
"어머니",
"형제"
]]
}, {
이름 : "Li Si",
가족: [
"할아버지",
"할머니",
"삼촌"
]]
}];
// 데이터 렌더링
var html = $ ( "#testtmpl"). render (dataSrouce);
$ ( "#list"). 부록 (html);
</스크립트>
</body>
</html>
사용자 정의 태그에 다른 사용 (권장되지 않음)
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<title> Yang Yuan의 사용자 정의 태그에서 다른 사용 --- </title>
<스타일>
</스타일>
</head>
<body>
<div>
<테이블>
<헤드>
<tr>
<th> 이름 </th>
<th> 단가 </th>
</tr>
</head>
<tbody id = "list">
</tbody>
</테이블>
</div>
<script src = "jquery.min.js"> </script>
<script src = "jsviews.js"> </script>
<!-JSRender 템플릿을 정의하십시오
<script id = "testtmpl"type = "text/x-jsrender">
<tr>
<td> {{: name}} </td>
<td>
{{!-Isshow는 사용자 정의 태그, 가격은 전달 된 매개 변수이며 상태는 추가 속성입니다.}}
{{isshow 가격 상태 = 0}}
{{:가격}}
{{else 가격 상태 = 1}}
-
{{/isshow}}
</td>
</tr>
</스크립트>
<cript>
// 데이터 소스
var dataSrouce = [{
이름 : "Apple",
가격 : 108
}, {
이름 : "Da Li",
가격 : 370
}, {
이름 : "Peach",
가격 : 99
}, {
이름 : "파인애플",
가격 : 371
}, {
이름 : "Orange",
가격 : 153
}];
// 사용자 정의 태그
$ .views.tags ({
"isshow": 기능 (가격) {
var temp = price+''. split ( '');
if (this.tagctx.props.status === 0) {
// 가격이 수선화의 수인지 판단합니다. 그렇다면 표시됩니다. 그렇지 않으면 표시되지 않습니다.
if == (math.pow (parseint (temp [0], 10), 3)+math.pow (parseint (temp [1], 10), 3)+math.pow (parseint (temp [2], 10), 3)) {
reture this.tagctxs [0] .render ();
}또 다른{
reture this.tagctxs [1] .render ();
}
}또 다른{
반품 "";
}
}
});
// 데이터 렌더링
var html = $ ( "#testtmpl"). render (dataSrouce);
$ ( "#list"). 부록 (html);
</스크립트>
</body>
</html>
사용자 정의 태그 대신 헬퍼 사용 (권장)
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<title> Yang Yuan의 맞춤형 태그 대신 헬퍼를 사용하십시오
<스타일>
</스타일>
</head>
<body>
<div>
<테이블>
<헤드>
<tr>
<th> 이름 </th>
<th> 단가 </th>
</tr>
</head>
<tbody id = "list">
</tbody>
</테이블>
</div>
<script src = "jquery.min.js"> </script>
<script src = "jsviews.js"> </script>
<!-JSRender 템플릿을 정의하십시오
<script id = "testtmpl"type = "text/x-jsrender">
<tr>
<td> {{: name}} </td>
<td>
{{!-분기 점프에 네이티브를 사용하십시오. 논리 처리에 헬퍼를 사용하십시오-}}.
{{if ~ isshow (가격)}}
{{:가격}}
{{또 다른}}
-
{{/만약에}}
</td>
</tr>
</스크립트>
<cript>
// 데이터 소스
var dataSrouce = [{
이름 : "Apple",
가격 : 108
}, {
이름 : "Da Li",
가격 : 370
}, {
이름 : "Peach",
가격 : 99
}, {
이름 : "파인애플",
가격 : 371
}, {
이름 : "Orange",
가격 : 153
}];
//돕는 사람
$ .Views.Helpers ({{
"isshow": 기능 (가격) {
var temp = price+''. split ( '');
if == (math.pow (parseint (temp [0], 10), 3)+math.pow (parseint (temp [1], 10), 3)+math.pow (parseint (temp [2], 10), 3)) {
진실을 반환하십시오.
}또 다른{
거짓을 반환합니다.
}
}
});
// 데이터 렌더링
var html = $ ( "#testtmpl"). render (dataSrouce);
$ ( "#list"). 부록 (html);
</스크립트>
</body>
</html>
전체 예제 코드를 다운로드하려면 여기를 클릭하십시오.
이 기사가 모든 사람의 JSRender 프로그래밍 학습에 도움이되기를 바랍니다.