Einführung in die Anwendungsbeispiele von jquery.mustache.js

jquery.mustache ist mit jQuery gekapselt und bietet die folgenden Methoden, um die Verwendung von Vorlagen komfortabler zu gestalten. 1. Drei Möglichkeiten zum Hinzufügen von Vorlagen

add,

addFromDom

addFromString

kann Vorlagen direkt hinzufügen, sei es als String Text oder Verweis auf andere DOM-Elemente

(1) Vorlage ist ein String-Literal

//add仅仅是把template添加到当前页面，注意并没有渲染 $.Mustache.add('string-template', ' Hi, {{name}}, this is an inline template '); (2) Verweis auf das DOM-Element addFromDom

// 两者是相同的，后者有更简洁的语法 These two are identical, the latter just provides a terser syntax. $.Mustache.add('dom-template', $('#dom-template').html()); $.Mustache.addFromDom('dom-template'); Wenn Sie die Vorlagen lieber im DOM speichern möchten (vorausgesetzt, sie werden aus einer externen Datei geladen), können Sie an dieser Stelle einfach

$.Mustache.addFromDom() ohne Parameter aufrufen. Dadurch werden alle -Blöcke in Ihrer Vorlage gelesen.

(3) Laden Sie die externe Vorlage (HTML-Datei) und rendern Sie dann

a, ohne sich auf die Modularität zu verlassen, und verwenden Sie direkt das integrierte $.Mustache .load()-Methode

var viewData = { name: 'Jonny' }; $.Mustache.load('./templates/greetings.htm').done(function () { $('body').mustache('simple-hello', viewData); }); Im obigen Beispiel laden wir die externe Vorlage (HTML-Datei) und sobald sie erfolgreich geladen wurde, werden die darin enthaltenen Elemente gerendert.

Die externe Vorlage sollte im Skript-Tag-Block definiert werden. In diesem Beispiel wird „simple-hello“ verwendet. Details siehe unten

./templates/greetings.htm Quellcode

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

b, wenn Sie sich auf Modularisierung verlassen, verwenden Sie zuerst require , um die Datei zu laden , und verwenden Sie dann Schnurrbart Datei lesen Inhalt (addFromString)

//1，准备工作 require('jQueryMustache'); var tpl = require("crownSheetTpl"); $.Mustache.addFromString(tpl); //2，使用 this.$el.empty().mustache('crownSheet-' + templateChoice + '-Template',this.model); 2, zwei Möglichkeiten zum Rendern ( 1) Die globale Methode $.Mustache.render() $.Mustache.render('my-template', viewData);

gibt einen String zurück ( gerenderter Vorlageninhalt)

(2) jQuerys Schnurrbart-Selektor $(“#someElement”).mustache('my-template', viewData);

Gibt einen jQuery-Selektor-Link zurück.

Standardmäßig wird für diese Methode der gerenderte Vorlageninhalt an das DOM-Selektorelement angehängt. Sie können dieses Verhalten jedoch dennoch ändern, indem Sie einen optionalen Methodenparameter übergeben.

// Ersetzen Sie den Inhalt von #someElement durch die gerenderte Vorlage.

$('#someElement').mustache('my-template', viewData, { method: 'html' } );

// Die gerenderte Mustache-Vorlage an #someElement voranstellen.

$('#someElement').mustache('my-template', viewData, { method: 'prepend' } );

Mit dem Moustache-Selektor können Sie auch ein Array von Ansichtsmodellen zum Rendern übergeben, was das Auffüllen von Listen zum Kinderspiel macht:)

Löschen Sie zunächst den Inhalt von someList, und rendern Sie es dann mit dem Array viewModels in die Listenvorlage list-template.

3, andere Methoden je nach Debugging und anderen Anforderungen, wie z. B. templates(), add(), clear() // 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);

4 Schließlich gibt es Teil-Rendering-Partials Unterstützt, nur Es muss sichergestellt werden, dass es im Voraus geladen wird

为了便于调试，你可以使用$.Mustache.templates()方法获取所有注册的模板。 //查看已add的所有模板 console.log($.Mustache.templates()); //查询某一个模板是否存在 console.log($.Mustache.has('string-template')); //你可以调用$.Mustache.clear清除所有模板 $.Mustache.clear(); //清除所有已add的模板，变空了 //经测试，已经空了 console.log($.Mustache.templates()); // Details siehe unten

./templates/templates.htm Quellcode $.Mustache.load('./templates/templates.htm').done(function () { // 渲染`webcontent`模板 和 `footer-fragment`子模板. $('body').mustache('webcontent', { year: 2012, adjective: 'EPIC' }); });