Présentation des exemples d'utilisation de jquery.mustache.js

jquery.mustache est encapsulé avec jQuery et fournit les méthodes suivantes pour rendre l'utilisation du modèle plus pratique. 1. Trois façons d'ajouter des modèles

add,

addFromDom

addFromString

peut ajouter des modèles directement, que ce soit sous forme de String texte ou référence à d'autres éléments DOM

(1) le modèle est une chaîne littérale

//add仅仅是把template添加到当前页面，注意并没有渲染 $.Mustache.add('string-template', ' Hi, {{name}}, this is an inline template '); (2) Référence à l'élément DOM addFromDom

// 两者是相同的，后者有更简洁的语法 These two are identical, the latter just provides a terser syntax. $.Mustache.add('dom-template', $('#dom-template').html()); $.Mustache.addFromDom('dom-template'); Si vous préférez stocker les modèles dans le DOM (en supposant qu'ils soient chargés à partir d'un fichier externe), à ce stade, vous pouvez simplement appeler

$.Mustache.addFromDom() sans aucun paramètre, cela lira tous les blocs

(3) Chargez le modèle externe (fichier html), puis restituez

a, sans compter sur la modularité , utilisez directement le $.Mustache intégré Méthode .load()

var viewData = { name: 'Jonny' }; $.Mustache.load('./templates/greetings.htm').done(function () { $('body').mustache('simple-hello', viewData); }); Dans l'exemple ci-dessus, nous chargeons le modèle externe (fichier html), et une fois qu'il est chargé avec succès, les éléments qu'il contient sont rendus.

Le modèle externe doit être défini dans le bloc de balise de script. L'identifiant de la balise de script sera utilisé comme nom de modèle, simple-hello

// Voir les détails ci-dessous.

./templates/greetings.htm code source

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

b, lorsque vous comptez sur la modularisation, utilisez d'abord require pour charger le fichier , puis utilisez moustache Lire le fichier content (addFromString)

//1，准备工作 require('jQueryMustache'); var tpl = require("crownSheetTpl"); $.Mustache.addFromString(tpl); //2，使用 this.$el.empty().mustache('crownSheet-' + templateChoice + '-Template',this.model); 2, deux façons de rendre

( 1) La méthode globale $.Mustache.render()

$.Mustache.render('my-template', viewData);

renvoie une chaîne ( contenu du modèle rendu)

(2) le sélecteur de moustache de jQuery

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

Renvoie un lien de sélection jQuery.

La valeur par défaut de cette méthode consiste à ajouter le contenu du modèle rendu à l'élément sélecteur DOM, mais vous pouvez toujours modifier ce comportement en passant un paramètre de méthode facultatif.

// Remplacez le contenu de #someElement par le modèle rendu.

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

// Ajoutez le modèle Moustache rendu à #someElement.

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

Le sélecteur de moustache vous permet également de transmettre un tableau de modèles de vue à restituer, ce qui facilite le remplissage des listes :)

Effacez d'abord le contenu de someList, puis restituez-le dans le modèle de liste modèle de liste avec le tableau viewModels. // 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, d'autres méthodes selon le débogage et d'autres besoins, telles que templates(), add(), clear()

4. Enfin, les rendus partiels sont partiels. pris en charge, seulement Il faut s'assurer qu'il est chargé à l'avance 为了便于调试，你可以使用$.Mustache.templates()方法获取所有注册的模板。 //查看已add的所有模板 console.log($.Mustache.templates()); //查询某一个模板是否存在 console.log($.Mustache.has('string-template')); //你可以调用$.Mustache.clear清除所有模板 $.Mustache.clear(); //清除所有已add的模板，变空了 //经测试，已经空了 console.log($.Mustache.templates());

// Voir ci-dessous pour plus de détails $.Mustache.load('./templates/templates.htm').done(function () { // 渲染`webcontent`模板 和 `footer-fragment`子模板. $('body').mustache('webcontent', { year: 2012, adjective: 'EPIC' }); }); ./templates/templates.htm code source