How To Generate Mustache Template?

  • 0
  • 1
  • Question
  • Updated 4 years ago
  • Answered

How To Generate Mustache Template?

Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,044 Points 20k badge 2x thumb

Posted 4 years ago

  • 0
  • 1
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,044 Points 20k badge 2x thumb
This is another post that will get you up to speed for the incredible presentations being prepared for the Mas Que Nada QuickBase User Group Conference in Brazil. BTW if you need reminding "Mas Que Nada" means "No Way" in Portuguese and the Mas Que Nada QuickBase User Group Conference only accepts presentations which you can't do in QuickBase. If you want to see things you can do in QuickBase you can go to that other conference. But if you want to see things you can't do in QuickBase you go to Mas Que Nada!

This post deals with bringing you up to speed on effortlessly generating Mustache Templates and rendering them. If you are still playing around with Exact Forms you are living in the past. Modern websites use various templating libraries to generate HTML fragments or documents client side from data by substituting placeholder {{tokens}} with actual data. In fact, QuickBase itself generates various portions of its interface using a popular templating library named Mustache. If you don't believe me just view the source of a QuickBase report and search for "{{" or "}}" and you will see many templates QuickBase naively uses to generate some portions of its own pages  So cast off the demons that are holding you back to using ancient technology and learn how to use Mustache Templates. If you master these techniques you will be well prepared to understand some of the incredible presentations at Mas Que Nada.


You can get a general understanding of Mustache with this beginner tutorial:

Tutorial: HTML Templates with Mustache.js
http://coenraets.org/blog/2011/12/tutorial-html-templates-with-mustache-js/

But after using Mustache for a while you wind up pounding out lots of templates that are just repetitious. Can't we create Mustache templates with a Mustache template? Luckily you can!

The code in this pastie shows you how:

Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=396


If you run the script (just paste it into the JavaScript console). there will be two alerts generated displaying the (1) generated template and (2) the rendered HTML:

Generated Template
http://pastie.org/10264221

Gerenrated Markup
http://pastie.org/10264223

In a nutshell the function RenderTable uses some fancy escaping to take an array of objects describing the column headers and tokens and generates a Mustache template dynamicallyNext using the dynamically generated template the data is merged and the markup is generated with the substituted data.

Well it may seem complicated at first reading but actually it is quite simple. But you will need a good understanding of using Mustache like to to understand was we have in store for the presentations at Mas Que Nada.