jquery.mustache는 jQuery로 캡슐화되어 있으며 템플릿 사용을 보다 편리하게 하기 위해 다음과 같은 방법을 제공합니다.
1. 템플릿을 추가하는 세 가지 방법
add,
addFromDom
addFromString
템플릿을 string텍스트로 추가하거나 다른 DOM 요소를 참조하여 직접 추가할 수 있습니다.
(1)템플릿은 직접 문자열입니다. 양
//add仅仅是把template添加到当前页面，注意并没有渲染
$.Mustache.add('string-template', '<p>Hi, {{name}}, this is an inline template<p>');(2) 참조 DOM 요소 addFromDom
// 两者是相同的，后者有更简洁的语法 These two are identical, the latter just provides a terser syntax.
$.Mustache.add('dom-template', $('#dom-template').html());
$.Mustache.addFromDom('dom-template'); 템플릿을 DOM에 저장하려는 경우(외부 파일에서 로드된다고 가정) 이 시점에서
$.Mustache.addFromDom( )을 호출하면 됩니다. 매개변수가 없으면 템플릿의 모든 블록을 읽습니다.
(3) 외부 템플릿(html 파일)을 로드한 다음
a를 렌더링하고 모듈화에 의존하지 않고 위 예에서 내장된 $.Mustache.load() 메소드
var viewData = { name: 'Jonny' };
$.Mustache.load('./templates/greetings.htm').done(function () {
$('body').mustache('simple-hello', viewData);
});를 직접 사용합니다. , 외부 템플릿(html 파일)을 로드하고 성공적으로 로드되면 내부 요소가 렌더링됩니다.
외부 템플릿은 스크립트 태그 블록에 정의해야 합니다. 이 경우 스크립트 태그의 ID가 템플릿 이름으로 사용됩니다.
//
./templates 소스 코드를 참조하세요. 자세한 내용은 아래 /greetings.htm
<script id="simple-hello" type="text/html">
<p>Hello, {{name}}, how are you?</p>
</script>b, 모듈성에 의존하는 경우 먼저 require를 사용하여 파일을 로드한 다음 mustache를 사용하여 content(addFromString)
//1，准备工作
require('jQueryMustache');
var tpl = require("crownSheetTpl");
$.Mustache.addFromString(tpl);
//2，使用
this.$el.empty().mustache('crownSheet-' + templateChoice + '-Template',this.model);2을 사용하세요. , 두 가지 렌더링 방법
( 1) 전역 $.Mustache.render() 메서드
$.Mustache.render('my-template', viewData);
문자열(렌더링된 템플릿 콘텐츠)을 반환합니다.
(2) jQuery 콧수염 선택기
$("#someElement").mustache('my-template', viewData);
는 jQuery 선택기 링크를 반환합니다.
이 메서드의 기본값은 렌더링된 템플릿 콘텐츠를 DOM 선택기 요소에 추가하는 것이지만, 선택적 메서드 매개변수를 전달하여 이 동작을 변경할 수도 있습니다.
// #someElement의 내용을 렌더링된 템플릿으로 바꿉니다.
$('#someElement').mustache('my-template', viewData, { method: 'html' });
// Mustache 템플릿을 #someElement.
$('#someElement').mustache('my-template', viewData, { method: 'prepend' });
mustache 선택기로 렌더링하면 모델 배열을 전달할 수도 있습니다. 콧수염 선택기를 사용하면 뷰 모델 배열을 렌더링하여 목록을 쉽게 채울 수 있습니다. :)
// Clear #someList and then render all the viewModels using the list-template.
var viewModels = [
{ name: 'Jonny' },
{ name: 'nock' },
{ name: 'lucy' }
];//注意是数组。
$('#someList').empty().mustache('list-template', viewModels);3. template(), add(),clear()와 같은 디버깅 요구 사항에 따른 다른 방법
为了便于调试，你可以使用$.Mustache.templates()方法获取所有注册的模板。
//查看已add的所有模板
console.log($.Mustache.templates());
//查询某一个模板是否存在
console.log($.Mustache.has('string-template'));
//你可以调用$.Mustache.clear清除所有模板
$.Mustache.clear(); //清除所有已add的模板，变空了
//经测试，已经空了
console.log($.Mustache.templates());$.Mustache.load('./templates/templates.htm').done(function () {
// 渲染`webcontent`模板 和 `footer-fragment`子模板.
$('body').mustache('webcontent', { year: 2012, adjective: 'EPIC' });
});./templates/templates.htm
<script id="footer-fragment" type="text/html">
<p>© Jonny {{year}}</p>
</script>
<script id="webcontent" type="text/html">
<h1><blink>My {{adjective}} WebSite!</blink></h1>
{{! Insert the `footer-fragment` template below }}
{{>footer-fragment}}
</script>위 내용은 jquery.mustache.js 사용 예시 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
