AKA: Loading Mustache templates correctly with a JSON data feed (or two)
Hi all
In an attempt to bring back a little forum traffic, I thought I'd post about a useful jQuery tip I discovered myself today.
I've been tasked by my employer to create a system that allows them to generate proposal documents (quotations) using a web application. It needs to be fast and smart, and it needs to save them a lot of time. The idea is that they can generate a basic proposal with all the information they need in about 5 minutes or less, as opposed to the current manual method which takes upward of an hour.
It looks a little like this:
It doesn't look too impressive right now. But the way that data is brought to the browser is awesome.
I am loading data from 3 sources, asynchronously, waiting for their response, and then mashing them all together and creating a form with a bunch of tables.
I am loading: a Mustache template (using jQuery-Mustache), a JSON file detailing the row titles and some of their attributes, and a JSON file detailing the rates to use for that template (designer rate, contractor rate, hourly rate, etc. as these are different for each type of proposal).
The great thing about Mustache is that it separates the data from the structure.
The code I used was as follows:
Code:
$.ajaxSetup({ cache: false });
$.when(
$.Mustache.load('./templates/proposals-hard-goods.php').done( function(){ return true; }),
$.ajax({ url: './templates/proposals-hard-goods.json', success: function(){ return true; }}),
$.ajax({ url: './rates/hard-goods.json', success: function(){ return true; }})
).then( function(templates, rows, rates){
var templates = templates[0];
var rows = rows[0];
var rates = rates[0];
// My other code
});
$.when(
$.Mustache.load('./templates/proposals-hard-goods.php').done( function(){ return true; }),
$.ajax({ url: './templates/proposals-hard-goods.json', success: function(){ return true; }}),
$.ajax({ url: './rates/hard-goods.json', success: function(){ return true; }})
).then( function(templates, rows, rates){
var templates = templates[0];
var rows = rows[0];
var rates = rates[0];
// My other code
});
It's important that each function returns true, and not false, or any other value (like returning the data for example, which might seem sensible). Note how I made this work for the jQuery Mustache - Mustache has a method called done() which is very similar in functionality to the ajax success() callback function.
Once my script adds the Mustache converted template including the form to the document, I attach a submit event to it like so:
Code:
var $target = $('#target'); // Example
$target.find('form').submit( function(){
// Some code here
return false;
});
$target.find('form').submit( function(){
// Some code here
return false;
});
Here you can see my template, rows, and rates side by side:
It feels amazingly fast and responsive and it helps to keep my code very tidy, and much easier to update!