{"id":46044,"date":"2014-09-10T06:31:34","date_gmt":"2014-09-10T06:31:34","guid":{"rendered":"https:\/\/wordpress.org\/plugins-wp\/mustache-php-js\/"},"modified":"2015-03-04T13:27:01","modified_gmt":"2015-03-04T13:27:01","slug":"mustache-php-js","status":"closed","type":"plugin","link":"https:\/\/wordpress.org\/plugins\/mustache-php-js\/","author":6560020,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1","stable_tag":"1","tested":"4.1.42","requires":"3.0","requires_php":"","requires_plugins":"","header_name":"Mustache Php Js","header_author":"David Ajnered","header_description":"","assets_banners_color":"","last_updated":"2015-03-04 13:27:01","external_support_url":"","external_repository_url":"","donate_link":"http:\/\/davidajnered.com","header_plugin_uri":"http:\/\/davidajnered.com","header_author_uri":"","rating":0,"author_block_rating":0,"active_installs":0,"downloads":448,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":[],"upgrade_notice":[],"ratings":{"1":0,"2":0,"3":0,"4":0,"5":0},"assets_icons":[],"assets_banners":[],"assets_blueprints":{},"all_blocks":[],"tagged_versions":["0.0.1","1"],"block_files":[],"assets_screenshots":[],"screenshots":[]},"plugin_section":[],"plugin_tags":[4298,44480,526,7149,975,19995,15475,22048,17808],"plugin_category":[43],"plugin_contributors":[],"plugin_business_model":[],"class_list":["post-46044","plugin","type-plugin","status-closed","hentry","plugin_tags-engine","plugin_tags-handlebars","plugin_tags-loop","plugin_tags-mustache","plugin_tags-template","plugin_tags-template-engine","plugin_tags-templating","plugin_tags-the-loop","plugin_tags-twig","plugin_category-customization","plugin_committers-davidajnered"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/s.w.org\/plugins\/geopattern-icon\/mustache-php-js.svg","icon_2x":false,"generated":true},"screenshots":[],"raw_content":"\n

Adds mustache as PHP and JavaScript template engine to WordPress. More info about mustache on mustache.github.io<\/a> and sitepoint.com<\/a>.<\/p>\n\n\n

PHP<\/h4>\n

This is an example of how it can look in your html template file.<\/p>\n 

<div class=\"panel-primary\">     <div class=\"panel-heading\">         <h3 class=\"panel-title\">Mustache Example<\/h3>     <\/div>     <div class=\"panel-body feed\">         <?php mustache()->capture(); ?>             <div class=\"col-sm-3\">                 <a href=\"{{permalink}}\">                     <img src=\"{{image}}\">                     <h3 class=\"title\">{{title}}<\/h3>                     <small>{{date}}<\/small>                     <div class=\"excerpt\">{{excerpt}}<\/div>                 <\/a>             <\/div>         <?php mustache()->render('postTmpl', getTmplData()); ?>     <\/div>     <?php mustache()->getScript(); ?>     <a class=\"load\" href=\"#\">Load more posts<\/a> <\/div> <\/code><\/pre>\n 
You can call the mustache() function as soon as the plugin is active. This will return the mustache object for you. Call the capture()<\/strong> function at the top of the code that you want to be a part of your template. This will start the PHP output buffer and save all code within your template to a string. At the end of your template you call render()<\/strong>. This will stop the output buffer as well as output the template with the passed template data.<\/p>\n 
If you need to load template file that's also possible by using the setTmpl($templateFile)<\/strong> method and then juse render as normal.<\/p>\n 
You probably want to get your template data from a function if your going to use mustache.js since you will be loading your data with ajax. If you're not going to use mustache.js there's not much more to it.<\/p>\n 
function getTmplData() {     \/\/ Load your data and return a nicely formatted array     $tmplData = [         'title' => 'First post',         'permalink' => 'http:\/\/your-site.com\/first-post',         'image' => 'image-1.jpg',         'date' => '2025-01-01',         'excerpt' => 'This is a future post',     ];      return $tmplData; } add_action('wp_ajax_get_tmpl_data', 'getTmplData'); add_action('wp_ajax_nopriv_get_tmpl_data', 'getTmplData'); <\/code><\/pre>\n 
Javascript<\/h4>\n 
Outside of your wrapper div you have to call the getScript()<\/strong> function. This will output the template code wrapped in script tags for mustache.js to use. Use the ID of the script to get the html in it and pass that to Mustache.render<\/code> together with your template data. Last step is to append (or maybe replace) the new content.<\/p>\n 
$('a#load').click(function(e) {     e.preventDefault();      \/\/ Get this data from your php function     var tmplData = {         'title' => 'Second post',         'permalink' => 'http:\/\/your-site.com\/second-post',         'image' => 'image-2.jpg',         'date' => '2225-01-01',         'excerpt' => 'This... is not going to happen',     };      var output = Mustache.render($('#postTmpl').html(), tmplData);     $('.wrapper').append(output); }); <\/code><\/pre>\n 
Partials<\/h4>\n 
Define your partials like this...<\/p>\n 
<?php mustache()->capture(); ?>     {{#posts}}         <div class=\"col-sm-3\">             <a href=\"{{permalink}}\">                 {{{post_thumbnail}}}                 <h3>{{post_title}}<\/h3>                 <small>{{date}}<\/small>                 <div>{{excerpt}}<\/div>             <\/a>         <\/div>     {{\/post}} <?php mustache()->setPartial('postPartial')->getScript(); ?> <\/code><\/pre>\n 
... and use it like this<\/p>\n 
<?php mustache()->capture(); ?>     {{>post_partial}} <?php mustache()->render('postTmpl', getTmplData()); ?> <\/code><\/pre>\n 
This will generate the same output as the first example, but now you can reuse your postPartial<\/em>. An example using partials in javascript could look something like this.<\/p>\n 
var template = $('#postTmpl').html(); var partials = {postPartial: $('#postPartial').html()}; $.post(ajax.url, data, function(response) {     var output = Mustache.render(template, response, partials);     $('.wrapper').append(output); }); <\/code><\/pre>\n\n\n
Silence.<\/p>\n\n\n
No changes since first release.<\/p>\n 
1.0<\/h4>\n 
    \n
  • First release<\/li>\n<\/ul>","raw_excerpt":"Adds mustache as PHP and JavaScript template engine to WordPress.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/46044","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=46044"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/davidajnered"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=46044"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=46044"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=46044"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=46044"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=46044"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=46044"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}