Javascript 템플릿 엔진 mustache.js_javascript 기술을 사용하는 방법 살펴보기

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));

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

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

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));

우리가 제공하는 가치에 따라 특정 부분을 렌더링할지 여부를 결정할 수 있어야 하는 경우에는 항상 문제가 있습니다. 물론, 이 문제도 해결할 수 있다는 점을 상기시켜야 합니다. 지정된 부분이 렌더링되지 않게 만드는 false가 아닙니다.

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

루프 출력

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

위의 방법만 배우면 대부분의 문제는 해결되지만 루프 출력이라는 문제가 여전히 남을 것입니다. 물론 콧수염이 매우 짜증날 것이라고 생각합니다. 실망시키지 않을 것이며, 출력을 반복하는 방법도 보여줍니다. 여기서는 객체로 구성된 배열을 출력합니다. 배열을 출력하려면 {{name}} 대신 {{.}}을 사용해야 합니다.

지정된 함수로 처리한 후 반환된 값을 반복하여 출력합니다

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가 배열의 값을 함수에 전달하고 함수에서 반환된 값을 출력하기 때문에 이는 사용자의 요구 사항을 완전히 충족합니다. 여기서 우리는 가장 바깥쪽 레이어가 배열이라는 것을 알 수 있습니다. 함수가 내부에서 사용되는 한, 외부 배열은 이 함수의 매개변수로 전달됩니다.

맞춤 기능

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);

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

이 기사가 모든 사람의 학습에 도움이 되기를 바랍니다.