WeChat 애플릿 Mustache 구문에 대한 자세한 소개

WeChat 미니 프로그램 Mustache 구문에 대한 자세한 설명

WeChat 미니 프로그램이 최근 큰 인기를 끌었는데, 이는 프론트엔드 개발 프로그래머들에게 좋은 소식입니다. 여기서는 주로 WeChat 미니 프로그램 Mustache 구문을 기록합니다.

Mustache 구문은 wxml에서 소규모 프로그램 개발을 위해 사용됩니다. 그러므로 콧수염에 대한 공부는 매우 필요합니다.

Mustache란? Mustache는 사용자 인터페이스를 비즈니스 데이터(콘텐츠)와 분리하기 위해 제작된 로직리스(가벼운 로직) 템플릿 구문 분석 엔진입니다. 표준 HTML 문서입니다. 예를 들어 미니 프로그램의 wxml 코드는

{{userInfo.nickName}}입니다. 여기서 {{ }}는 Mustache의 구문입니다.

1. Mustache의 템플릿 구문은 매우 간단합니다.

{{keyName}}

{{{keyName}}}

{ {#keyName}} {{/keyName}}

{{^keyName}} {{/keyName}}

{{.}}

{{! }}

{{>partials}}

1. {{keyName}}

⑴ 단순 변수 대체: {{name}}

var data = { "name": "weChat" };

Mustache.render("{{name}}님은 훌륭합니다.", data);

return weChat은 훌륭합니다.

⑵ 변수에

등과 같은 html 코드가 포함되어 있습니다. 이스케이프를 원하지 않으면 {{&name}}

var data = {
 
       "name" : "
weChat
"
 
     };
 
var output = Mustache.render("{{&name}} is excellent.", data);
 
console.log(output);

<을 사용할 수 있습니다. 🎜>

반환:

weChat

은 훌륭합니다.

"&"가 없는 반환은 다음과 같이 이스케이프됩니다.

weChat

은 훌륭합니다.

또한 {{&}} 대신 {{{ }}}를 사용할 수도 있습니다.

⑶ 객체인 경우 속성을 선언할 수도 있습니다

var data = {
 
       "name" : {
 
       "first" : "Chen"，
 
       "last" : "Jackson"
 
       }，
 
       "age" : 18
 
     };
 
var output = Mustache.render(
 
      "name:{{name.first}} {{name.last}}，age:{{age}}", data);
 
console.log(output);

반환: 이름: Chen Jackson, 나이: 18

2. {{#keyName}} {{/keyName}}

#으로 시작하고 /로 끝나 블록을 나타냅니다. 현재 컨텍스트의 키 값입니다. 매우 강력하며 if 및 foreach와 유사한 기능을 가지고 있습니다.

var data = {
 
       "stooges" : [ {
 
         "name" : "Moe"
 
       }， {
 
         "name" : "Larry"
 
       }， {
 
         "name" : "Curly"
 
       } ]
 
     };
 
  
 
var output = Mustache.render("{{＃stooges}}{{name}}{{/stooges}}"，
 
         data);
 
console.log(output);

복귀: 모에

래리

컬리

3. }} {{/keyName}}

이 구문은 {{#keyName}} {{/keyName}}과 유사하지만, 차이점은 keyName 값이 null인 경우에만 영역을 렌더링하고 출력한다는 것입니다. 정의되지 않았거나 콘텐츠를 차단합니다. 예:

var data = {
 
       "name" : "
weChat
"
 
     };
 
  var tpl = ‘{{^nothing}}没找到 nothing 键名就会渲染这段{{/nothing}}';
 
  var output = Mustache.render(tpl, data);

반환: 키 이름이 없으면 이 섹션이 렌더링됩니다.

4, {{.} }

{{.}}는 루프에서 전체 배열을 출력할 수 있는 열거형을 나타냅니다. 예:

var data = {
 
  "product": ["Macbook ","iPhone ","iPod ","iPad "]
 
  }
 
  var tpl = '{{#product}}
 
{{.}}
 
{{/product}}';
 
  
 
  var html = Mustache.render(tpl, data);

반환:

Macbook

iPod

iPad

5. 댓글은

6. {{>partials }}

는 >로 시작하여 구조가 복잡할 때 이 구문을 사용하여 복잡한 구조를 여러 개의 작은 하위 모듈로 나눌 수 있습니다.