html 페이지 콘텐츠를 구성하는 데 사용되는 콧수염 템플릿입니다. 실제 작업에서 화면을 렌더링하기 위해 동일한 템플릿에서 다른 함수를 호출하려는 경우 페이지를 렌더링할 때 전달된 매개변수가 사용자 정의된 경우 수동으로 판단할 수 있습니다. [판단하기 어려운 경우에는 들어오는 매개변수를 변경하여 판단할 수 있습니다] Xiaobai를 사용하여 이 템플릿의 구문을 살펴보겠습니다. Mustache의 템플릿 구문은 몇 가지만 포함하면 매우 간단합니다. {{data}} {{#data}} {{/data}} {{^data}} {{/data}} {{.}} {{ 데모를 사용하여 구문에 대한 간략한 소개를 제공하세요. 1 ... 2 34b71d4dca0bef2a033161a097f3707f2cacc6d41bbb37262a98f745aa00fbf0 3 4ec11beb6c39d0703d1751d203c17053 4 var data = { 5 "name": " xiaohua ", 6 "msg": { 7 "sex": " female ", 8 "age": " 22 ", 9 "hobit": " reading " 10 }, 11 "subject": ["Ch","En","Math","physics"] 12 } 13 14 var tpl = 'e388a4556c0f65e1904146cc1a846bee {{name}}94b3e26ee717c64999d7867364b1b4a3'; 15 var html = Mustache.render(tpl, data);16 17 alert ( html ); 18 2cacc6d41bbb37262a98f745aa00fbf0 19 ... {{데이터}} {{}}은 Mustache의 식별자입니다. 중괄호 안의 데이터는 키 이름을 나타냅니다. 이 문장의 기능은 키 이름과 일치하는 키 값을 직접 출력하는 것입니다. 예: 1 var tpl = '{{name}}'; 2 var html = Mustache.render(tpl, data); 3 //输出： 4 xiaohua {{#데이터}} {{/데이터}} 은 #으로 시작하고 /으로 끝나서 블록을 나타냅니다. 현재 컨텍스트의 키 값을 기반으로 블록을 한 번 이상 렌더링합니다. 예를 들어 데모에서 tpl을 다시 작성합니다. > 1 var tpl = '{{#msg}} e388a4556c0f65e1904146cc1a846bee{{sex}},{{age}},{{hobit}}94b3e26ee717c64999d7867364b1b4a3 {{/msg}}'; 2 var html = Mustache.render(tpl, data); 3 4 //输出： 5 e388a4556c0f65e1904146cc1a846bee female, 22, reading94b3e26ee717c64999d7867364b1b4a3 참고: 의 데이터 값이 null, 정의되지 않음, false이면 콘텐츠가 렌더링되거나 출력되지 않습니다. {{#data}} {{/data}} {{^데이터}} {{/데이터}} 구문은 과 유사하지만 데이터 값이 null, 정의되지 않음 또는 false인 경우에만 블록 내용을 렌더링하고 출력한다는 점이 다릅니다. {{#data}} {{/data}} 1 var tpl = {{^nothing}}没找到 nothing 键名就会渲染这段{{/nothing}}; 2 var html = Mustache.render(tpl, data); 3 //输出： 4 没找到 nothing 键名就会渲染这段 {{.}} 은 루프에서 전체 배열을 출력할 수 있는 열거형을 나타냅니다. 예: {{.}} 1 var tpl = '{{#subject}} e388a4556c0f65e1904146cc1a846bee{{.}}94b3e26ee717c64999d7867364b1b4a3 {{/subject}}'; 2 var html = Mustache.render(tpl, data); 3 //输出： 4 e388a4556c0f65e1904146cc1a846beeCh94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846beeEn94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846beeMath94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846beephysics94b3e26ee717c64999d7867364b1b4a3 {{>일부}} 으로 시작하여 구조가 복잡할 때 {{> msg}}와 같은 하위 모듈을 나타내면 이 구문을 사용하여 복잡한 구조를 다음과 같은 여러 개의 작은 하위 모듈로 나눌 수 있습니다. > 1 var tpl = "4a249f0d628e2318394fd9b75b4636b1{{namme}}473f0a7621bec819994bb5020d29372a ff6d136ddc5fdfeffaf53ff6ee95f185{{>msg}}929d1f5ca49e04fdcb27f9465b944689" 2 var partials = {msg: "{{#msg}}25edfb22a4f469ecb59f1190150159c6{{sex}}bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6{{age}}bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6{{hobit}}bed06894275b65c1ab86501b08a632eb{{/msg} 3 var html = Mustache.render(tpl, data, partials); 4 //输出： 5 4a249f0d628e2318394fd9b75b4636b1xiaohua473f0a7621bec819994bb5020d29372a 6 ff6d136ddc5fdfeffaf53ff6ee95f185 7 25edfb22a4f469ecb59f1190150159c6femalebed06894275b65c1ab86501b08a632eb 8 25edfb22a4f469ecb59f1190150159c622bed06894275b65c1ab86501b08a632eb 9 25edfb22a4f469ecb59f1190150159c6readingbed06894275b65c1ab86501b08a632eb 10 929d1f5ca49e04fdcb27f9465b944689{{{데이터}}} 출력은 기타 등의 특수 문자를 번역합니다. 내용을 그대로 유지하려면 을 사용할 수 있습니다. 예: {{data}} {{{}}} 1 var tpl = '{{#msg}} e388a4556c0f65e1904146cc1a846bee{{{age}}}94b3e26ee717c64999d7867364b1b4a3 {{/msg}}' 2 //输出： 3 e388a4556c0f65e1904146cc1a846bee2294b3e26ee717c64999d7867364b1b4a3{{!댓글}} 은 댓글을 나타내며 댓글 이후에는 어떤 콘텐츠도 렌더링되거나 출력되지 않습니다. ! 1 {{!这里是注释}} 2 //输出： 작업에서 페이지의 콘텐츠가 배경에서 데이터를 가져와 페이지에 렌더링하는 경우 콧수염 템플릿을 사용할 수 있습니다. 렌더링된 데이터가 키 이름과 일치해야 한다는 점은 주목할 가치가 있습니다.
