jquery.mustache.js 사용 예시 소개-JS 튜토리얼-php.cn

jquery.mustache는 jQuery로 캡슐화되어 있으며 템플릿 사용을 보다 편리하게 하기 위해 다음과 같은 방법을 제공합니다. 1. 템플릿을 추가하는 세 가지 방법

add,

addFromDom

addFromString

템플릿을 string 텍스트로 추가하거나 다른 DOM 요소를 참조하여 직접 추가할 수 있습니다.

(1)템플릿은 직접 문자열입니다. 양

//add仅仅是把template添加到当前页面，注意并没有渲染 $.Mustache.add('string-template', ' Hi, {{name}}, this is an inline template '); 로그인 후 복사 (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

Hello, {{name}}, how are you?

로그인 후 복사 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); 로그인 후 복사 먼저 someList의 내용을 지운 다음 배열 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()); 로그인 후 복사 4. 마지막으로 부분 렌더링 부분이 지원됩니다. 미리 로드되었는지 확인하세요

$.Mustache.load('./templates/templates.htm').done(function () { // 渲染`webcontent`模板 和 `footer-fragment`子模板. $('body').mustache('webcontent', { year: 2012, adjective: 'EPIC' }); }); 로그인 후 복사 / / 아래 소스코드를 참고하세요 ./templates/templates.htm

My {{adjective}} WebSite! {{! Insert the `footer-fragment` template below }} {{>footer-fragment}} 로그인 후 복사