경량 JavaScript 템플릿 엔진 mustache.js 코드 사용 방법에 대한 자세한 설명

Mustache.js 경량 JavaScript 템플릿 엔진을 사용하는 방법을 자세히 설명하겠습니다.

간단한 예

function show(t) {
 $("#content").html(t);
}
var view = {
 title: 'YZF',
 cacl: function () {
 return 6 + 4;
 }
};
$("#content").html(Mustache.render("{{title}} spends {{cacl}}", view));

Moustache 템플릿의 구문을 명확하게 볼 수 있습니다. 포함하려면 {{ 및 }}만 사용하고 개체 이름을 입력하면 됩니다.

이 예에서도 지정된 속성이 함수인 경우 함수의 내용이 출력되지 않고 대신 함수가 먼저 실행된 후 반환된 결과가 표시되는 것을 볼 수 있습니다.

HTML 태그를 이스케이프하지 마세요

var view = {
 name: "YZF",
 company: "<b>ninesoft</b>"
};
show(Mustache.render("{{name}} <br /> {{company}} <br />{{{company}}}<br/>{{&company}}", view));

이 예에서 Mustache가 기본적으로 값의 html 태그를 이스케이프하는 것을 볼 수 있지만 때로는 필요하지 않습니다.

여기서 {{{ 및 }}}를 사용하여 포함하거나 {{ 및 }}를 사용하여 포함할 수 있으며 Mustache는 내부의 html 태그를 이스케이프하지 않습니다.

하위 속성 값 바인딩

var view = {
 "name": {
 first: "Y",
 second: "zf"
 },
 "age": 21
};
show(Mustache.render("{{name.first}}{{name.second}} age is {{age}}", view));

첫 번째 예를 보고 열심히 읽으면 하위 속성을 바인딩할 수 있는지 생각해 보는 사람이 있을 거라 믿습니다. 축하합니다. 이제 요구 사항을 해결하는 방법입니다. 를 통해 하위 속성을 사용하면 됩니다.

지정된 부분을 렌더링할지 여부에 대한 조건부 선택

var view = {
 person: false
};
show(Mustache.render("eff{{#person}}abc{{/person}}", view));

항상 문제가 존재합니다. 여전히 우리가 제공하는 값에 따라 특정 부분을 렌더링할지 여부를 결정할 수 있어야 한다면 이 문제는 해결될 수 있습니다. 이제 물론 프롬프트가 표시될 것입니다. 지정된 부분이 렌더링되지 않게 만드는 것은 단지 거짓이 아닙니다.

null, 빈 배열, 0, 빈 문자열은 모두 동일하게 유효합니다. 구문은 비교적 간단합니다. {{#key}} ... {{/key}}를 사용하여 중간에 있는 콘텐츠를 제어하면 됩니다.

루프 출력

var view = {
 stooges: [
 { "name": "Moe" },
 { "name": "Larry" },
 { "name": "Curly" }
 ]
};
show(Mustache.render("{{#stooges}}{{name}}<br />{{/stooges}}", view));

위의 방법만 배우시면 대부분의 문제는 해결되겠지만, 여전히 문제가 있을 텐데요, 루프 출력을 하나씩 작성해 보면 될 거라 믿습니다. 물론 Mustache는 우리를 실망시키지 않을 것입니다. 또한 출력을 루프하는 방법도 보여줍니다. 여기서는 객체로 구성된 배열이 출력됩니다. {{.}} 대신에 {이름} }.

루프는 지정된 함수에 의해 처리된 후 반환된 값을 출력합니다.

var view = {
 "beatles": [
 { "firstname": "Johh", "lastname": "Lennon" },
 { "firstname": "Paul", "lastname": "McCartney" }
 ],
 "name": function () {
 return this.firstname + this.lastname;
 }
};
show(Mustache.render("{{#beatles}}{{name}}<br />{{/beatles}}", view));

루프 출력이 가능하지만 여전히 나중에 처리하고 싶습니다. 그러면 Mustache가 배열의 값을 함수에 전달하고 함수에서 반환된 값을 출력하므로 이는 사용자의 요구 사항을 완전히 충족합니다. 여기서 우리는 가장 바깥쪽 레이어가 배열이라는 것을 알 수 있습니다. 함수가 내부에서 사용되는 한, 외부 배열은 이 함수의 매개변수로 전달됩니다.

Custom function

var view = {
 "name": "Tater",
 "bold": function () {
 return function (text, render) {
   return render(text) + "<br />";
 }
 }
}
show(Mustache.render("{{#bold}}{{name}}{{/bold}}", view));

위에서는 모두 변수를 섹션으로 사용했는데, 이제 함수를 섹션으로 사용하면 어떤 효과가 있을까요?

섹션 중간에 있는 원래 문자열을 첫 번째 매개변수로, 기본 인터프리터를 두 번째 매개변수로 사용하여 함수에서 반환된 함수를 호출한 다음 직접 처리할 수 있습니다.

반의어 섹션

var view = {
 "repos": []
};
show(Mustache.render("{{#repos}}{{.}}{{/repos}}{{^repos}}no repos{{/repos}}", view));

위 섹션도 사용하지만 특정 부분만 출력할지 여부만 선택할 수 있습니다. 그래서 여기서 우리는 그것을 보상합니다.

{{^ 및 }}를 사용하여 섹션을 정의하면 이 부분은 내부 값이 비어 있거나, null, 빈 배열 또는 빈 문자열인 경우에만 표시됩니다. 그러면 if else의 효과를 얻을 수 있습니다.

부분 템플릿

var view = {
 names: [
 { "name": "y" },
 { "name": "z" },
 { "name": "f" }
 ]
};
var base = "<h2 id="Names">Names</h2>{{#names}}{{>user}}{{/names}}";
var name = "<b>{{name}}</b>";
show(Mustache.render(base, view, { user: name }));

Mustache를 사용하면 시간이 많이 절약되지만, 템플릿을 많이 정의했지만 서로 중첩해서 사용할 수 없어 번거롭기도 합니다.

그래서 여기에서는 다른 템플릿에서 사용할 일부 템플릿을 정의하는 방법도 소개합니다. 여기서 다른 템플릿을 사용하는 방법은 바로 {{>templetename}}입니다.

가장 큰 차이점은 Mustache.render 메서드에 세 번째 매개변수가 있다는 것입니다.

사전 컴파일된 템플릿

Mustache.parse(template);
//其他代码
Mustache.render(template,view);

템플릿에는 장점과 단점이 있습니다. 템플릿을 컴파일하는 데 시간이 걸리므로 특정 템플릿을 사용할 것이라는 것을 알고 있으면 나중에 사용할 수 있도록 템플릿을 미리 컴파일할 수 있습니다.

위 내용은 경량 JavaScript 템플릿 엔진 mustache.js 코드 사용 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!