Mustache - Templating library<\/code><\/b><\/p>\nJSON vs IHM<\/h4>\n
On ne va pas faire valider des flux JSON quand bien m\u00eame ces flux peuvent \u00eatre mis en forme par une extension comme JSONview et sont le “coeur” de la g\u00e9n\u00e9ration des \u00e9crans. C’est tout le foss\u00e9 presque culturelle qui existe entre le monde du d\u00e9veloppement et d’autres d\u00e9partements (marketing, \u00e9ditorial, design) qui travaillent aussi \u00e0 la cr\u00e9ation d’une application ou d’un site. Mieux vaut une repr\u00e9sentation UX (des \u00e9crans) des r\u00e8gles fonctionnelles, compr\u00e9hensibles par tous.<\/p>\n
Pour se rendre compte du foss\u00e9 entre les flux JSON et de v\u00e9ritables IHM, deux captures suffisent, l’une du flux JSON brut, l’autre de l’\u00e9cran, rapidement maquett\u00e9 \u00e0 l’aide de Mustache de ce m\u00eame flux.<\/p>\n
Chargement non-UX du flux JSON \u00e0 l’aide de JSONview<\/b>
\n ![\"Mustache,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/10\/json_mustache_non_ux_2.jpg\")
<\/p>\n
Chargement UX du m\u00eame flux JSON \u00e0 l’aide de Mustache<\/b>
\n ![\"Mustache,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/10\/json_mustache_ux_1.jpg\")
<\/p>\n
Dans notre article, on ne sert de Mustache que comme d’un outil v\u00e9loce de maquettage pour des flux JSON mais cela va sans dire Mustache<\/code> peut-\u00eatre aussi la solution choisie, en production, pour g\u00e9n\u00e9rer v\u00e9ritablement les \u00e9crans.<\/b><\/p>\nComme dans l’article pr\u00e9c\u00e8dent, une pr\u00e9cision s’impose, vous pourriez rencontrer un probl\u00e8me lorsque vous essayez de lire le document JSON qui alimente vos \u00e9crans si vous ne mettez pas ce code sur un serveur. En effet, pour des raisons de s\u00e9curit\u00e9 un navigateur comme Google Chrome ne permet pas de charger des fichiers externes sur les dossiers locaux. Si vous devez charger un fichier .json en local, le mieux est donc d\u2019utiliser firefox, safari ou tout simplement charger le fichier appelant la source de donn\u00e9es au format .json sur un serveur en local type WAMP, MAMP ou EASYPHP.<\/p>\n
Utiliser mustache pour rendre un flux JSON<\/h4>\n
Dans notre template, on se montre volontairement prolixe pour ce qui est des boucles pour \u00eatre s\u00fbr de savoir ce qui est effectivement appeller depuis le JSON<\/code><\/p>\nOUTPUT – Le rendu du flux JSON \u00e0 l’aide de Mustache<\/b>
\n ![\"Mustache,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/10\/json_mustache_complex_3.jpg\")
<\/p>\n
INPUT – La source du flux JSON, relativement complexe.<\/b>
\n ![\"Mustache,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/10\/json_mustache_complex_source_4.jpg\")
<\/p>\n
D\u00e9tails du template de mustache<\/b><\/p>\n\r\n \r\n <script id=\"content-template\" type=\"text\/template\">\r\n\r\n <ol>\r\n \t{{#result}}\r\n \t\t{{#people}}\r\n \t\t\t{{#person}}\r\n <li>\r\n \t\t\t{{#image}}\r\n \t\t\t\t\t\t\t\t{{#code}}\r\n \t\t\t\t\t\t\t\tIMG ({{code}}) => <img src=\"{{url}}\" \/><br>\r\n \t\t\t\t\t\t\t\t{{\/code}}\r\n \t\t\t\t\t\t\t\t{{^code}}\r\n \t\t\t\t\t\t\t\tno img\r\n \t\t\t\t\t\t\t\t{{\/code}}\r\n \t\t\t{{\/image}}\r\n\r\n\r\n \t\t\t\tTITLE => <a href=\"{{url}}\/\" title=\"{{title}}\">{{title}} <\/a>\r\n \t\t\t\t<br><br>\r\n\r\n\r\n \t\t\t\t\tBODY escaped HTML => {{{body}}}\r\n \t\t\t\t\t<br><br>\r\n\r\n \t\t\t\t\tBODY unescaped HTML => {{body}}\r\n \t\t\t\t\t<br><br>\r\n\r\n TAXONOMY => \r\n \t\t\t\t\t\t{{#taxonomy}}\r\n \t\t\t\t\t\t\t{{#tags}}\r\n \t\t\t\t\t\t\t\t<span class=\"tag\"><a class=\"no-decoration\" href=\"{{tid}}\">{{name}} ({{tid}})<\/a><\/span>\r\n \t\t\t\t\t\t\t{{\/tags}}\r\n \t\t\t\t\t\t{{\/taxonomy}}\r\n \t\t\t <br>\r\n \t\t\t GEOLOC => \r\n \t\t{{#geoloc}}\r\n \t\t LAT, LONG => ({{latitude}}, {{longitude}})\r\n \t\t <br>\r\n \t\t {{#address}}\r\n GEOLOC => CITY, COUNTRY => <span class=\"tag\">{{locality}} -[{{country}}]<\/a><\/span><br>\r\n \t\t{{\/address}}\r\n \t\t{{\/geoloc}}\r\n <\/li>\r\n \t\t\t{{\/person}}\r\n \t\t{{\/people}}\r\n \t{{\/result}}\r\n <\/ol>\t\r\n\r\n \t<\/script>\r\n \r\n<\/pre>\nPour comprendre la fonctionnement du template, beaucoup d’information sont disponibles sur le site de mustache de github.<\/p>\n
Source : http:\/\/mustache.github.io\/mustache.5.html<\/a><\/p>\nPar exemple BODY => {{{body}}}<\/code> fait que mustache va interpr\u00e9ter les balises html de la variable du JSON body<\/code>.<\/p>\nTous les \u00e9l\u00e9ments pour faire fonctionner l’ensemble<\/h4>\n
Il y un fichier HTML, CSS, un fichier JS et des fichiers JSON qui sont la source de donn\u00e9es. On a plac\u00e9 le tout dans diff\u00e9rents r\u00e9pertoires : assets, css, js, json. On a intentionnellement mis deux fichiers JSON de source de donn\u00e9s assez compliqu\u00e9s pour v\u00e9ritablement simuler le fonctionnement d’une API qui remonte des donn\u00e9s complexes et pas seulement 3 donn\u00e9es qui se battent en duel !<\/p>\n
Tous les fichiers de cet article sont dans le fichier .zip<\/code> : _mustache_example_4.zip<\/a><\/p>\n<\/blockquote>\nLe style avec good_all_style.css<\/code><\/b><\/p>\n\r\n \/* #General\r\n ================================================== *\/\r\n\r\n body {\r\n \tpadding: 10px;\r\n \tmargin: 20px;\r\n \tfont-size: 14px;\r\n }\r\n body * {\r\n \t-webkit-font-smoothing: antialiased !important;\r\n \ttext-rendering: optimizelegibility;\r\n }\r\n a {\r\n \ttransition: all 0.2s ease-in-out;\r\n \t-moz-transition: all 0.2s ease-in-out;\r\n \t-webkit-transition: all 0.2s ease-in-out;\r\n \t-o-transition: all 0.2s ease-in-out;\r\n }\r\n body, h1, h2, h3, h4, h5, h6 {\r\n \tfont-family: \"Myriad Pro\", Arial, Helvetica, Tahoma, sans-serif;\r\n \tfont-weight: 300;\r\n }\r\n h1 {\r\n \tfont-size: 30px;\r\n \tline-height: 42px;\r\n }\r\n h2 {\r\n \tfont-size: 24px;\r\n \tline-height: 32px;\r\n }\r\n h3 {\r\n \tfont-size: 18px;\r\n \tline-height: 24px;\r\n \tfont-weight: normal;\r\n \tmargin-bottom: 15px;\r\n }\r\n h4 {\r\n \tfont-size: 16px;\r\n \tfont-weight: normal;\r\n \tline-height: 20px;\r\n \tmargin-bottom: 15px;\r\n }\r\n h5 {\r\n \tfont-size: 14px;\r\n \tfont-weight: bold;\r\n \tline-height: 18px;\r\n \tmargin-bottom: 15px;\r\n }\r\n h6 {\r\n \tfont-size: 12px;\r\n \tfont-weight: bold;\r\n \tline-height: 16px;\r\n \tmargin-bottom: 10px;\r\n \ttext-transform: uppercase;\r\n }\r\n p {\r\n \tfont-size: 14px;\r\n \tline-height: 170%;\r\n }\r\n p:empty {\r\n \t\/*display: none;\r\n \tmargin-bottom: 0;*\/\r\n }\r\n a.list {\r\n \t\/*color: #F6177B;*\/\r\n \tcolor: #000;\r\n \ttext-decoration: none;\r\n \toutline: none;\r\n }\r\n span.tag a {\r\n \t\/*color: #F6177B;*\/\r\n \tcolor: #999999;\r\n \ttext-decoration: none;\r\n \toutline: none;\r\n }\r\n \r\n<\/pre>\nLe code JS qui permet de charger les diff\u00e9rents fichiers json main_mustache_complex.js<\/code><\/b><\/p>\n\r\n function sample_1 () {\r\n \t \t\tvar product_name ='json\/G_data_sample_utf8_complex_1.json';\r\n \t\t\t\t$.getJSON(''+product_name+'', function(data) {\t\r\n \t\t \tvar template = $('#content-template').html();\r\n \t\t \tvar info = Mustache.to_html(template, data);\r\n \t\t $('#PersonNewsFeed').html(info);\r\n \t\t\t});\r\n \t\tconsole.log(\"product_name => \"+product_name+\"\\n\");\r\n \t}\r\n\r\n \tfunction sample_2 () {\r\n \t\t \t\tvar product_name ='json\/G_data_sample_utf8_complex_2.json';\r\n \t \t\t\t\t$.getJSON(''+product_name+'', function(data) {\t\r\n \t\t\t \t\tvar template = $('#content-template').html();\r\n \t\t\t \t\tvar info = Mustache.to_html(template, data);\r\n \t\t\t \t$('#PersonNewsFeed').html(info);\r\n \t\t\t\t});\r\n \t\t\tconsole.log(\"product_name => \"+product_name+\"\\n\");\r\n \t}\r\n\r\n \r\n \r\n<\/pre>\nLe premier fichier de source de donn\u00e9es G_data_sample_utf8_complex_1.json<\/code> charg\u00e9 par la fonction sample_1<\/code><\/b><\/p>\n\r\n { \r\n \"encoding\" : \"UTF-8\",\r\n \"result\": {\r\n \"people\": {\r\n \"person\": [\r\n \r\n { \"firstname\": \"Alikaou\",\r\n \t\t\"lastname\": \"Camara\",\r\n \t\t\"title\": \"The Soninke diaspora workers\",\r\n \t\t\"image\": [\r\n {\r\n \"code\": \"256x256\",\r\n \"url\": \"assets\/userphoto\/alikaou_soninke.jpg\" \r\n }],\r\n \t\t\"body\": \"Nulla facilisi. Etiam enim tellus, adipiscing et rutrum vitae, tempus nec orci. Aenean in consequat nunc. Pellentesque sagittis dolor non leo rutrum at suscipit quam adipiscing. Nulla faucibus faucibus neque id ultrices. Suspendisse potenti. Nulla sit amet justo vitae leo convallis facilisis. Maecenas condimentum urna quis tellus imperdiet sagittis. Nam quis metus sed erat feugiat sollicitudin pulvinar nec justo. Sed est quam, porta non elementum non, ullamcorper eu arcu. Duis semper placerat enim non luctus. Vivamus tincidunt tempor erat, ac fringilla nulla aliquam quis. Suspendisse pretium enim risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi id risus vel nibh dignissim dictum.<\/b><\/p>\",\r\n \t\t\"taxonomy\": [\r\n {\r\n \"vid\": \"1_D890_3\",\r\n \"tags\": [\r\n {\r\n \"tid\": \"1_D75_9\",\r\n \"name\": \"Africa\"\r\n }\r\n ]\r\n },\r\n {\r\n \"vid\": \"1_D890_1\",\r\n \"tags\": [\r\n {\r\n \"tid\": \"1_D75_639\",\r\n \"name\": \"Mali\"\r\n },\r\n {\r\n \"tid\": \"1_D75_3949\",\r\n \"name\": \"Barack Obama\"\r\n }\r\n ]\r\n }\r\n ],\r\n \r\n \"geoloc\": {\r\n \"latitude\": \"12.650000\",\r\n \"longitude\": \"-8.000000\",\r\n \"bounds\": {\r\n \"northeast\": {\r\n \"latitude\": \"12.732974\",\r\n \"longitude\": \"-7.875945\"\r\n },\r\n \"southwest\": {\r\n \"latitude\": \"12.490909\",\r\n \"longitude\": \"-8.115081\"\r\n }\r\n },\r\n \"address\": {\r\n \"thoroughfare\": \"\",\r\n \"postalcode\": \"\",\r\n \"locality\": \"Bamako\",\r\n \"subadminarea\": \"Bamako\",\r\n \"adminarea\": \"Bamako\",\r\n \"country\": \"ML\"\r\n }\r\n }\r\n \r\n \r\n \r\n \t},\r\n\r\n \t{ \"firstname\": \"Robert Herbert\",\r\n \t\t\"lastname\": \"Appel\",\r\n \t\t\"title\": \"A Concise History of Modern Painting\",\r\n \t\t\"image\": [\r\n {\r\n \"code\": \"256x256\",\r\n \"url\": \"assets\/userphoto\/Modern-Painting-Herbert.jpg\" \r\n }],\r\n \t\t\"body\": \"
Nulla facilisi. Etiam enim tellus, adipiscing et rutrum vitae, tempus nec orci. Aenean in consequat nunc. Pellentesque sagittis dolor non leo rutrum at suscipit quam adipiscing. Nulla faucibus faucibus neque id ultrices. Suspendisse potenti. Nulla sit amet justo vitae leo convallis facilisis. Maecenas condimentum urna quis tellus imperdiet sagittis. Nam quis metus sed erat feugiat sollicitudin pulvinar nec justo. Sed est quam, porta non elementum non, ullamcorper eu arcu. Duis semper placerat enim non luctus. Vivamus tincidunt tempor erat, ac fringilla nulla aliquam quis. Suspendisse pretium enim risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi id risus vel nibh dignissim dictum.<\/b><\/p>\",\r\n \t\t\t\"taxonomy\": [\r\n {\r\n \"vid\": \"1_D430_3\",\r\n \"tags\": [\r\n {\r\n \"tid\": \"1_D89_2\",\r\n \"name\": \"South America\"\r\n }\r\n ]\r\n },\r\n {\r\n \"vid\": \"1_D430_1\",\r\n \"tags\": [\r\n {\r\n \"tid\": \"1_D89_210\",\r\n \"name\": \"Brasil\"\r\n },\r\n {\r\n \"tid\": \"1_D89_2902\",\r\n \"name\": \"Dilma Rousseff\"\r\n },\r\n {\r\n \"tid\": \"1_D89_3794\",\r\n \"name\": \"Pope Fran\u00e7ois\"\r\n },\r\n {\r\n \"tid\": \"1_D89_790\",\r\n \"name\": \"Da Vinci\"\r\n },\r\n {\r\n \"tid\": \"1_D89_1601\",\r\n \"name\": \"Religion\"\r\n },\r\n {\r\n \"tid\": \"1_D89_731\",\r\n \"name\": \"Vatican\"\r\n }\r\n ]\r\n }\r\n ],\r\n \"geoloc\": {\r\n \"latitude\": \"-22.903539\",\r\n \"longitude\": \"-43.209587\",\r\n \"bounds\": {\r\n \"northeast\": {\r\n \"latitude\": \"-22.749045\",\r\n \"longitude\": \"-43.099382\"\r\n },\r\n \"southwest\": {\r\n \"latitude\": \"-23.08302\",\r\n \"longitude\": \"-43.795449\"\r\n }\r\n },\r\n \"address\": {\r\n \"thoroughfare\": \"\",\r\n \"postalcode\": \"\",\r\n \"locality\": \"Rio de Janeiro\",\r\n \"subadminarea\": \"\",\r\n \"adminarea\": \"Rio de Janeiro\",\r\n \"country\": \"BR\"\r\n }\r\n }\r\n \t\t\r\n \t},\r\n \t\r\n \t{ \"firstname\": \"Youssef\",\r\n \t\t\"lastname\": \"Touieb\",\r\n \t\t\"title\": \"History of the Muslim Brotherhood in Egypt\",\r\n \t\t\"image\": [\r\n {\r\n \"code\": \"256x256\",\r\n \"url\": \"assets\/userphoto\/Youssef-Touieb-Selbstbildnis.jpg\" \r\n }],\r\n \t\t\"body\": \"
Nulla facilisi. Etiam enim tellus, adipiscing et rutrum vitae, tempus nec orci. Aenean in consequat nunc. Pellentesque sagittis dolor non leo rutrum at suscipit quam adipiscing. Nulla faucibus faucibus neque id ultrices. Suspendisse potenti. Nulla sit amet justo vitae leo convallis facilisis. Maecenas condimentum urna quis tellus imperdiet sagittis. Nam quis metus sed erat feugiat sollicitudin pulvinar nec justo. Sed est quam, porta non elementum non, ullamcorper eu arcu. Duis semper placerat enim non luctus. Vivamus tincidunt tempor erat, ac fringilla nulla aliquam quis. Suspendisse pretium enim risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi id risus vel nibh dignissim dictum.<\/b><\/p>\",\r\n \t\t\t\"taxonomy\": [\r\n {\r\n \"vid\": \"1_D670_3\",\r\n \"tags\": [\r\n {\r\n \"tid\": \"1_D64_3\",\r\n \"name\": \"Middle East\"\r\n }\r\n ]\r\n },\r\n {\r\n \"vid\": \"1_D670_1\",\r\n \"tags\": [\r\n {\r\n \"tid\": \"1_D94_579\",\r\n \"name\": \"Egypt\"\r\n },\r\n {\r\n \"tid\": \"1_D94_3942\",\r\n \"name\": \"Moubarak\"\r\n },\r\n {\r\n \"tid\": \"1_D94_3599\",\r\n \"name\": \"Mohamed Morsi\"\r\n }\r\n ]\r\n }\r\n ],\r\n \"geoloc\": {\r\n \"latitude\": \"30.044420\",\r\n \"longitude\": \"31.235712\",\r\n \"bounds\": {\r\n \"northeast\": {\r\n \"latitude\": \"30.110602\",\r\n \"longitude\": \"31.301973\"\r\n },\r\n \"southwest\": {\r\n \"latitude\": \"30.009228\",\r\n \"longitude\": \"31.222067\"\r\n }\r\n },\r\n \"address\": {\r\n \"thoroughfare\": \"\",\r\n \"postalcode\": \"\",\r\n \"locality\": \"Cairo\",\r\n \"subadminarea\": \"\",\r\n \"adminarea\": \"Cairo Governorate\",\r\n \"country\": \"EG\"\r\n }\r\n }\r\n \t\t\r\n \t}\r\n \r\n \r\n \r\n ]\r\n }\r\n }\r\n }\r\n \r\n<\/pre>\n
Le deuxi\u00e8me fichier de source de donn\u00e9es G_data_sample_utf8_complex_1.json<\/code> charg\u00e9 par le fonction sample_2<\/code><\/b><\/p>\n\r\n { \r\n \"encoding\" : \"UTF-8\",\r\n \"result\": {\r\n \"people\": {\r\n \"person\": [\r\n \r\n { \"firstname\": \"Youssef\",\r\n \t\t\"lastname\": \"Wara\",\r\n \t\t\"title\": \"Ougao vs Disney\",\r\n \t\t\"image\": [\r\n {\r\n \"code\": \"256x256\",\r\n \"url\": \"assets\/userphoto\/youssef_wara.jpg\" \r\n }],\r\n \t\t\"body\": \"Nulla facilisi. Etiam enim tellus, adipiscing et rutrum vitae, tempus nec orci. Aenean in consequat nunc. Pellentesque sagittis dolor non leo rutrum at suscipit quam adipiscing. Nulla faucibus faucibus neque id ultrices. Suspendisse potenti. Nulla sit amet justo vitae leo convallis facilisis. Maecenas condimentum urna quis tellus imperdiet sagittis. Nam quis metus sed erat feugiat sollicitudin pulvinar nec justo. Sed est quam, porta non elementum non, ullamcorper eu arcu. Duis semper placerat enim non luctus. Vivamus tincidunt tempor erat, ac fringilla nulla aliquam quis. Suspendisse pretium enim risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi id risus vel nibh dignissim dictum.<\/b><\/p>\",\r\n \t\t\r\n \t\t\r\n \t\t\"taxonomy\": [\r\n {\r\n \"vid\": \"1_D890_3\",\r\n \"tags\": [\r\n {\r\n \"tid\": \"1_D75_9\",\r\n \"name\": \"Africa\"\r\n }\r\n ]\r\n },\r\n {\r\n \"vid\": \"1_D890_1\",\r\n \"tags\": [\r\n {\r\n \"tid\": \"1_D75_639\",\r\n \"name\": \"Kenya\"\r\n },\r\n {\r\n \"tid\": \"1_D75_3949\",\r\n \"name\": \"Tanzanie\"\r\n }\r\n ]\r\n }\r\n ],\r\n \r\n \"geoloc\": {\r\n \"latitude\": \"12.650000\",\r\n \"longitude\": \"-8.000000\",\r\n \"bounds\": {\r\n \"northeast\": {\r\n \"latitude\": \"12.732974\",\r\n \"longitude\": \"-7.875945\"\r\n },\r\n \"southwest\": {\r\n \"latitude\": \"12.490909\",\r\n \"longitude\": \"-8.115081\"\r\n }\r\n },\r\n \"address\": {\r\n \"thoroughfare\": \"\",\r\n \"postalcode\": \"\",\r\n \"locality\": \"Bamako\",\r\n \"subadminarea\": \"Bamako\",\r\n \"adminarea\": \"Bamako\",\r\n \"country\": \"ML\"\r\n }\r\n }\r\n \r\n \r\n \r\n \t},\r\n\r\n \t{ \"firstname\": \"Moshe\",\r\n \t\t\"lastname\": \"Dunlop\",\r\n \t\t\"title\": \"Chess theory\",\r\n \t\t\"image\": [\r\n {\r\n \"code\": \"256x256\",\r\n \"url\": \"assets\/userphoto\/Moshe-Dunlop.jpg\" \r\n }],\r\n \t\t\"body\": \"
Nulla facilisi. Etiam enim tellus, adipiscing et rutrum vitae, tempus nec orci. Aenean in consequat nunc. Pellentesque sagittis dolor non leo rutrum at suscipit quam adipiscing. Nulla faucibus faucibus neque id ultrices. Suspendisse potenti. Nulla sit amet justo vitae leo convallis facilisis. Maecenas condimentum urna quis tellus imperdiet sagittis. Nam quis metus sed erat feugiat sollicitudin pulvinar nec justo. Sed est quam, porta non elementum non, ullamcorper eu arcu. Duis semper placerat enim non luctus. Vivamus tincidunt tempor erat, ac fringilla nulla aliquam quis. Suspendisse pretium enim risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi id risus vel nibh dignissim dictum.<\/b><\/p>\",\r\n \t\t\r\n \t\t\t\"taxonomy\": [\r\n {\r\n \"vid\": \"1_D430_3\",\r\n \"tags\": [\r\n {\r\n \"tid\": \"1_D89_2\",\r\n \"name\": \"South America\"\r\n }\r\n ]\r\n },\r\n {\r\n \"vid\": \"1_D430_1\",\r\n \"tags\": [\r\n {\r\n \"tid\": \"1_D89_210\",\r\n \"name\": \"Brasil\"\r\n },\r\n {\r\n \"tid\": \"1_D89_2902\",\r\n \"name\": \"Dilma Rousseff\"\r\n },\r\n {\r\n \"tid\": \"1_D89_3794\",\r\n \"name\": \"Pope Fran\u00e7ois\"\r\n },\r\n {\r\n \"tid\": \"1_D89_790\",\r\n \"name\": \"Da Vinci\"\r\n },\r\n {\r\n \"tid\": \"1_D89_1601\",\r\n \"name\": \"Religion\"\r\n },\r\n {\r\n \"tid\": \"1_D89_731\",\r\n \"name\": \"Vatican\"\r\n }\r\n ]\r\n }\r\n ],\r\n \"geoloc\": {\r\n \"latitude\": \"-22.903539\",\r\n \"longitude\": \"-43.209587\",\r\n \"bounds\": {\r\n \"northeast\": {\r\n \"latitude\": \"-22.749045\",\r\n \"longitude\": \"-43.099382\"\r\n },\r\n \"southwest\": {\r\n \"latitude\": \"-23.08302\",\r\n \"longitude\": \"-43.795449\"\r\n }\r\n },\r\n \"address\": {\r\n \"thoroughfare\": \"\",\r\n \"postalcode\": \"\",\r\n \"locality\": \"Rio de Janeiro\",\r\n \"subadminarea\": \"\",\r\n \"adminarea\": \"Rio de Janeiro\",\r\n \"country\": \"BR\"\r\n }\r\n }\r\n \t\t\r\n \t},\r\n \t\r\n \t{ \"firstname\": \"Abdul\",\r\n \t\t\"lastname\": \"Fromager\",\r\n \t\t\"title\": \"Milk Recipes\",\r\n \t\t\t\"image\": [\r\n {\r\n \"code\": \"256x256\",\r\n \"url\": \"assets\/userphoto\/Abdul-Fromager-Selbstbildnis.jpg\" \r\n }],\r\n \t\t\"body\": \"
Nulla facilisi. Etiam enim tellus, adipiscing et rutrum vitae, tempus nec orci. Aenean in consequat nunc. Pellentesque sagittis dolor non leo rutrum at suscipit quam adipiscing. Nulla faucibus faucibus neque id ultrices. Suspendisse potenti. Nulla sit amet justo vitae leo convallis facilisis. Maecenas condimentum urna quis tellus imperdiet sagittis. Nam quis metus sed erat feugiat sollicitudin pulvinar nec justo. Sed est quam, porta non elementum non, ullamcorper eu arcu. Duis semper placerat enim non luctus. Vivamus tincidunt tempor erat, ac fringilla nulla aliquam quis. Suspendisse pretium enim risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi id risus vel nibh dignissim dictum.<\/b><\/p>\",\r\n \t\t\r\n \t\t\t\"taxonomy\": [\r\n {\r\n \"vid\": \"1_D670_3\",\r\n \"tags\": [\r\n {\r\n \"tid\": \"1_D64_3\",\r\n \"name\": \"Middle East\"\r\n }\r\n ]\r\n },\r\n {\r\n \"vid\": \"1_D670_1\",\r\n \"tags\": [\r\n {\r\n \"tid\": \"1_D94_579\",\r\n \"name\": \"Egypt\"\r\n },\r\n {\r\n \"tid\": \"1_D94_3942\",\r\n \"name\": \"Moubarak\"\r\n },\r\n {\r\n \"tid\": \"1_D94_3599\",\r\n \"name\": \"Mohamed Morsi\"\r\n }\r\n ]\r\n }\r\n ],\r\n \"geoloc\": {\r\n \"latitude\": \"30.044420\",\r\n \"longitude\": \"31.235712\",\r\n \"bounds\": {\r\n \"northeast\": {\r\n \"latitude\": \"30.110602\",\r\n \"longitude\": \"31.301973\"\r\n },\r\n \"southwest\": {\r\n \"latitude\": \"30.009228\",\r\n \"longitude\": \"31.222067\"\r\n }\r\n },\r\n \"address\": {\r\n \"thoroughfare\": \"\",\r\n \"postalcode\": \"\",\r\n \"locality\": \"Cairo\",\r\n \"subadminarea\": \"\",\r\n \"adminarea\": \"Cairo Governorate\",\r\n \"country\": \"EG\"\r\n }\r\n }\r\n \t\t\r\n \t}\r\n \r\n \r\n \r\n ]\r\n }\r\n }\r\n }\r\n<\/pre>\n
L’ensemble du fichier qui charge le tout….<\/b><\/p>\n\r\n <!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN\"\r\n \"http:\/\/www.w3.org\/TR\/html4\/loose.dtd\">\r\n\r\n <html lang=\"en\">\r\n <head>\r\n \t<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\">\r\n <body>\r\n <head>\r\n \t<meta charset=\"utf-8\" \/>\r\n \t<title>Mustache complex<\/title>\r\n \t<link rel=\"STYLESHEET\" type=\"text\/css\" href=\"css\/good_all_style.css\">\r\n <\/head>\r\n <body>\r\n\r\n\r\n\r\n <h2>Check Out the list<\/h2>\r\n\r\n <ul>\r\n \t<li><a href=\"javascript:sample_1()\" class=\"list\">Load sample_1<\/a><\/li>\r\n \t<li><a href=\"javascript:sample_2()\" class=\"list\">Load sample_2<\/a><\/li>\r\n <\/ul>\r\n\r\n <h2>People<\/h2>\r\n <ul class=\"list\" id=\"PersonNewsFeed\">\r\n <\/ul> \r\n\r\n <script src=\"js\/jquery-1.7.1.min.js\"><\/script>\r\n <script src=\"js\/mustache.js\"><\/script>\r\n <script src=\"js\/main_mustache_complex.js\"><\/script> \r\n <script id=\"content-template\" type=\"text\/template\">\r\n\r\n <ol>\r\n \t{{#result}}\r\n \t\t{{#people}}\r\n \t\t\t{{#person}}\r\n <li>\r\n \t\t\t{{#image}}\r\n \t\t\t\t\t\t\t\t{{#code}}\r\n \t\t\t\t\t\t\t\tIMG ({{code}}) => <img src=\"{{url}}\" \/><br>\r\n \t\t\t\t\t\t\t\t{{\/code}}\r\n \t\t\t\t\t\t\t\t{{^code}}\r\n \t\t\t\t\t\t\t\tno img\r\n \t\t\t\t\t\t\t\t{{\/code}}\r\n \t\t\t{{\/image}}\r\n\r\n\r\n \t\t\t\tTITLE => <a href=\"{{url}}\/\" title=\"{{title}}\">{{title}} <\/a>\r\n \t\t\t\t<br><br>\r\n\r\n\r\n \t\t\t\t\tBODY escaped HTML => {{{body}}}\r\n \t\t\t\t\t<br><br>\r\n\r\n \t\t\t\t\tBODY unescaped HTML => {{body}}\r\n \t\t\t\t\t<br><br>\r\n\r\n TAXONOMY => \r\n \t\t\t\t\t\t{{#taxonomy}}\r\n \t\t\t\t\t\t\t{{#tags}}\r\n \t\t\t\t\t\t\t\t<span class=\"tag\"><a class=\"no-decoration\" href=\"{{tid}}\">{{name}} ({{tid}})<\/a><\/span>\r\n \t\t\t\t\t\t\t{{\/tags}}\r\n \t\t\t\t\t\t{{\/taxonomy}}\r\n \t\t\t <br>\r\n \t\t\t GEOLOC => \r\n \t\t{{#geoloc}}\r\n \t\t LAT, LONG => ({{latitude}}, {{longitude}})\r\n \t\t <br>\r\n \t\t {{#address}}\r\n GEOLOC => CITY, COUNTRY => <span class=\"tag\">{{locality}} -[{{country}}]<\/a><\/span><br>\r\n \t\t{{\/address}}\r\n \t\t{{\/geoloc}}\r\n <\/li>\r\n \t\t\t{{\/person}}\r\n \t\t{{\/people}}\r\n \t{{\/result}}\r\n <\/ol>\t\r\n\r\n \t<\/script>\r\n\r\n \r\n\r\n\r\n\r\n\r\n <\/body>\r\n <\/html>\r\n \r\n<\/pre>\nConclusion : <\/b> Cela peut sembler assez bousinesque<\/code> et d\u00e9cevant<\/code> de se donner tant de mal pour un si pi\u00e8tre r\u00e9sultat en terme UX. Disons-le les templates sont assez moches. Toutefois, l’objectif \u00e9tait de valider rapidement des r\u00e8gles fonctionnelles, \u00e0 l’aide de Mustache, en rendant des \u00e9crans plus “parlants” qu’un aride flux JSON, de ce point de vue la valeur ajout\u00e9e en terme fonctionnel est ind\u00e9niable.<\/p>\nEn savoir plus<\/h2>\n\n- Le site officiel de
mustache<\/code>
http:\/\/mustache.github.io\/<\/a><\/li>\n- Tutorial: HTML Templates with Mustache.js (excellent)
http:\/\/coenraets.org\/blog\/2011\/12\/tutorial-html-templates-with-mustache-js\/<\/a><\/li>\n- Add IF\/ELSE function upon value dans mustache
https:\/\/github.com\/janl\/mustache.js\/issues\/311<\/a><\/li>\n- Installing Mustache.tmbundle dans textmate
https:\/\/gist.github.com\/defunkt\/323624<\/a><\/li>\n- Des explications sur les Mustache Tags
https:\/\/github.com\/bobthecow\/mustache.php\/wiki\/Mustache-Tags<\/a><\/li>\n- La fonction jQuery.getJSON() dans jQuery
http:\/\/api.jquery.com\/jQuery.getJSON\/<\/a><\/li>\n- Semantic templates with Mustache.js and Handlebars.js par Martin Brennan
http:\/\/www.martin-brennan.com\/semantic-templates-with-mustache-js-and-handlebars-js\/<\/a><\/li>\n- How to Load Mustache.js Templates From an External File with jQuery
http:\/\/www.levihackwith.com\/how-to-load-mustache-js-templates-from-an-external-file-with-jquery\/<\/a><\/li>\n- Quick Tip: Using the Mustache Template Library
http:\/\/net.tutsplus.com\/tutorials\/javascript-ajax\/quick-tip-using-the-mustache-template-library\/<\/a><\/li>\n- Easy HTML Templates with Mustache
http:\/\/www.elated.com\/articles\/easy-html-templates-with-mustache\/<\/a><\/li>\n- Introduction \u00e0 Punch – Punch is a simple, intuitive web publishing framework that will delight both designers and developers.
http:\/\/laktek.github.io\/punch\/<\/a><\/li>\n- Une vid\u00e9o sur JavaScript and JSON tutorial: JavaScript templating with mustache.js | lynda.com
http:\/\/corel.tv\/javascript-and-json-tutorial-javascript-templating-with-mustache-js-lynda-com\/<\/a><\/li>\n- La m\u00eame vid\u00e9o sur youtube – JavaScript and JSON tutorial: JavaScript templating with mustache.js
http:\/\/www.youtube.com\/watch?feature=player_embedded&v=xIJuDcA6YBo#t=214<\/a><\/li>\n- A JSON Tutorial. Getting started with JSON using JavaScript and jQuery
http:\/\/iviewsource.com\/codingtutorials\/getting-started-with-javascript-object-notation-json-for-absolute-beginners\/<\/a><\/li>\n- Introduction to JavaScript Templating with Mustache.js
http:\/\/iviewsource.com\/codingtutorials\/introduction-to-javascript-templating-with-mustache-js\/<\/a><\/li>\n- L’extension JSONView pour Chrome, portage de l’excellent extension firefox original
https:\/\/chrome.google.com\/webstore\/detail\/jsonview\/chklaanhfefbnpoihckbnefhakgolnmc<\/a><\/li>\n- L’extension firefox JSONView
http:\/\/benhollis.net\/software\/jsonview\/<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"Dans un pr\u00e9c\u00e8dent billet, on avait vu comment utiliser le plugin de jQuery Template pour se faciliter le travail de g\u00e9n\u00e9ration de pages\/\u00e9crans\/IHM depuis des… <\/p>\n