WeChat 미니 프로그램 개발을 위한 Mustache 구문의 코드 예제 공유

WeChat 미니 프로그램의 wxml에 있는 Mustache 구문은 무시할 수 없기 때문에 iOS 프런트엔드를 한번도 해본 적이 없는 저를 혼란스럽게 만듭니다. . . 온라인으로 확인했어요. . . 녹음하세요.

Mustache란?

Mustache는 비즈니스 데이터(콘텐츠)와 사용자 인터페이스를 분리하기 위해 제작된 로직리스(가벼운 로직) 템플릿 파싱 엔진입니다. 특정 형식(일반적으로 표준 HTML 문서)으로. 화면을 렌더링하기 위해 동일한 템플릿에서 다른 함수를 호출하려는 경우 페이지를 렌더링할 때 전달된 매개변수가 사용자 정의된 경우 수동으로 판단할 수 있습니다.

예를 들어, 미니 프로그램의 wxml 코드:

// 这里的{{ }}就是Mustache的语法。
<text>{{userInfo.nickName}}</text>，

Mustache의 템플릿 구문은 매우 간단하며 몇 가지만 있습니다.

 {{keyName}}
  {{{keyName}}}
  {{#keyName}} {{/keyName}}
  {{^keyName}} {{/keyName}}
  {{.}}
  {{!comments}}
  {{>partials}}

{{keyName}} 여러 개 상황

간단한 변수 대체: {{name}}

var data = { "name": "weChat" };
  Mustache.render（"{{name}} is excellent."，data）;

  返回 weChat is excellent.

변수에 html 코드가 포함되어 있습니다.

如：<br>、<tr>等而不想转义，可以在用{{&name}}
var data = {
          "name" : "<br>weChat<br>"
      };
var output = Mustache.render("{{&name}} is excellent.", data);
console.log(output);

返回：<br>weChat<br> is excellent.
去掉"&"的返回是转义为：<br>weChat<br> is excellent.
另外，你也可以用{{{ }}}代替{{&}}。

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

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

{{#keyName}} {{/keyName}}은 #으로 시작하고 /로 끝나서 블록을 나타냅니다. 현재 컨텍스트의 키 값을 기반으로 블록을 한 번 이상 렌더링합니다. . 그 기능은 매우 강력하며 if 및 foreach와 같은 기능도 추가할 수 있습니다.

var data = {
           "stooges" : [ {
               "name" : "Moe"
           }， {
               "name" : "Larry"
           }， {
               "name" : "Curly"
       };
var output = Mustache.render("{{＃stooges}}<b>{{name}}</b>{{/stooges}}"，
              data);
console.log(output);
返回：<b>Moe</b>
   <b>Larry</b>
   <b>Curly</b>

{{^keyName}} {{/keyName}} 예외 출력

이 구문은 {{#keyName}}과 동일합니다. {{ /keyName} }비슷하지만 차이점은 keyName 값이 null, 정의되지 않음 또는 false인 경우에만 블록의 내용을 렌더링하고 출력한다는 것입니다. 예:

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

{{.}}는 전체 배열을 반복하는 데 사용되는 열거형을 나타냅니다. 예:

var data = {
    "product": ["Macbook ","iPhone ","iPod ","iPad "]
    }
    var tpl = &#39;{{#product}} <p>{{.}}</p> {{/product}}&#39;;
    var html = Mustache.render(tpl, data);
返回：<p>Macbook </p> <p>iPhone </p> <p>iPod </p> <p>iPad </p>

{{! }}는 주석

 {{!这里是注释}}

를 나타냅니다. {{>partials}}

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

 var tpl = "<h1>{{namme}}</h1> <ul>{{>msg}}</ul>" 
   var partials = {msg: "{{#msg}}<li>{{sex}}</li><li>{{age}}</li><li>{{hobit}}</li>{{/msg} 
   var html = Mustache.render(tpl, data, partials); 
   //输出： 
   <h1>xiaohua</h1>

{{{data}}}

{{data}} 출력은 다른 특수 문자를 번역합니다. 내용을 그대로 유지하려면 {{{}}},

 var tpl = &#39;{{#msg}} <p>{{{age}}}</p> {{/msg}}&#39;
 //输出：
 <p>22</p>

작다. 대부분 사용할 수 있는 프로그램이 너무 많아요. 또 찾으면 업데이트하겠습니다. . .

위 내용은 WeChat 미니 프로그램 개발을 위한 Mustache 구문의 코드 예제 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!