CiviCRM Community Forums (archive)

We are using mustache to do client side templating. It works fine but we identified 2 missing features:

1) being able to alter the data just before render it (mustache doesn't do any calculation/logic, it has to be done before)
2) being able to apply some jquery to the generated html

Each of these actions generates a custom event (assign & render). You can write code that "catch" then and do something extra.
I'm using "on" that replaces the "live", ie. that will work even if you add more data using ajax later on and render it with this template. For a simple example like below, a bit overkill

<script>
var somedata = {crmAPI entity="contact" action="get"}; // this generates a json formated of 25 contacts
{literal}
cj (function ($) {

   $('#tpl-contacts').on (''assign",function (event, data) { // this is called everytime the template is assigned data
      //do a complex calculation, like the average age, and adds it to the data
      data['average_age'] = "42";
   });
 
   $('#contacts').on ("render", function (event) { //this is called when the list has been generated
      $(this).find('crm-editable').crmEditable(); // and now the first & last name are edit in place
   });


   $('#contacts').crmTemplate ('#tpl-contact',somedata); // generate the list of contacts and displays it
});
</script>

<script type="text/x-templates" id="tpl-contacts">
got {{count}} contact and average age of {{average_age}}
{{#values}}
<li class="crm-entity" id="contact-{{id}}"> <span class="crmf-first_name crm-editable">{{first_name}}</span> <span class="crmf-last_name crm-editable">{{last_name}}</span></li>
{{/values}}
{/literal}

<p>under there I generate (client size) a list of contacts</p>
<div id="#contacts">Will be replaced using the javascript templating</div>



If you want to see a more complex template

http://svn.civicrm.org/civicrm/branches/trunk.profile/templates/CRM/UF/Page/Inline/EditFields.tpl

and the crmTemplate jquery plugin (thin wrapper around mustache)
http://svn.civicrm.org/civicrm/branches/trunk.profile/js/jquery/jquery.crmtemplate.js