Mustache Helper functions

Recently, implemented the Mustache Template processing framework.  As i worked through this implementation, i found myself creating the same JavaScript call and decided to simplify the overall execution into a single function signature and just call it multiple times.

Root Mustache Call:

1:  /*********************************************************************  
2:     @file - string value, Should be the HTML Template file.  
3:     @filterid - string value, Should the ID value of the Script tag inside  
4:           @file to obtain the HTML content.  
5:     @api - string value, Should be the URL to the API request  
6:     @dest - string value, Should be the destination selector, ideally ID  
7:           value of the control to load the Mustache Template into.  
8:     @func - (Nullable) Function value, If defined this will be executed  
9:           after the loading of the data into the Template.  
10:  ----------------------------------------------------------------------  
11:     LoadTemplate('...', '#...', 'api/.../...', "#...", function(){...});  
12:  *********************************************************************/  
13:  function LoadTemplate(file, filterid, api, dest, func) {  
14:     GetJsonUTF8(api, function (resp) {  
15:        $.get(file, function (template) {  
16:           var tmplt = $(template).filter(filterid).html();  
17:           $(dest).html(Mustache.render(tmplt, JSON.parse(resp)));  
18:           //Execution post-load methodology  
19:           if (typeof func !== 'undefined') {  
20:              if (typeof func === 'function') {  
21:                 func();  
22:              }  
23:           }  
24:        });  
25:     });  
26:  }

Calling Functions:

1:  /*********************************************************************  
2:     @api - string value, Should be the URL to the API request  
3:     @dest - string value, Should be the destination selector, ideally ID  
4:           value of the control to load the Mustache Template into.  
5:     @func - (Nullable) Function value, If defined this will be executed  
6:           after the loading of the data into the Template.  
7:  ----------------------------------------------------------------------  
8:     LoadDropDownList('api/.../...', "#...", function(){...});  
9:  *********************************************************************/  
10:  function LoadDropDownList(api, dest, func) {  
11:     LoadTemplate("Templates/DropDownList.html", "#ddlTempl", api, dest, func);  
12:  }  
13:  function LoadTeamDropDownList() {  
14:     LoadDropDownList('api/teams/get', "#teams");  
15:  }  
16:  function LoadMagnitudeDropDownList(txt) {  
17:     LoadDropDownList('api/magnitudes/get', "#taskdetailsmagnitudes", function () {  
18:        $("#taskdetailsmagnitudes select option").filter(function () {  
19:           return $(this).text() == txt;  
20:        }).prop('selected', true);  
21:     });  
22:  }

Hopefully this will help you on implementations and help in stream-lining new Template implementation.

Comments

Post a Comment

Popular posts from this blog

SysInternals - BgInfo for ALL Users

Image
I have seen various sites that have been pretty good at getting close to the point of getting Background Information created by the tool BgInfo but none of them have actually solved my specific problem. Solutions currently out there include: Placing into the "All Users" folder This did not work for me, as our implementation does not contain an "All Users" folder in the "Users" folder for profiles. Reg-Hacking and HKCU or HKLM entry This is the worst of all the bad choices available.  I am experienced with Registry Editing and I still would not want or find a need to do this. Placing into the "Default" folder This is good going forward but what about those 20+ user profiles that are already logged in.  FYI, if your server has 20+ user account profiles in the "Users" directory you have larger problems than I am willing to assist with in this posting. The solution that worked for me, will be described below in pain-staki
Read more

JSON/AJAX Helpers

Recently, had an implementation where I needed to implement ASP.Net Web API 2 and accompanied it with Javascript/JQuery AJAX communication.  In doing this i found myself making the same pattern calls with some varying value for certain properties for the AJAX data calls.  As such, i ended up building a few helper functions to simply the inclusion of these various minor quirks based on what was needed.  Below  you will find the various forms. 1: /********************************************************************* 2: @type - dataType, such as 'json', 'xml', 'script', 'jsonp' or 'html' 3: @contentType - string value, represents the HTML type of content 4: IE: 'application/json; charset=utf-8' 5: @url - API URL, such as 'api/tasks' should be constrainted to the 6: Web API Controller 7: @success - Function(data, status, xhr) handler, The logic to execute 8: on a 200 res
Read more

Acquiring List of controls - Classic JS

Recently ran into a scenario where I need to use the low-level JavaScript parser, instead of JQuery.  During this venture, I ran across a situation where it would be easier for me to select all the HTML Elements with an ID, assign it to a variable as JSON, and then operate on it from that point. So using my previous short-hand experience with JQuery, I started constructing a similar type of format to be used. *********** JQuery *************** // One line and your done, pretty much var cntrls = $('[id]') // Later on, you simply access the element from the variable var val = cntrls['someID'].value *********** JavaScript *********** // Not so one-liner; put in the DOM.Ready event for JS var cntrlIDs = {} var root = document.getElementById('rootID').querySelectorAll('*'); for (i = 0, n = root.length; i < n; ++i) { var el = root[i]; if (el.id) { cntrlIDs[el.id] = el; } } // Later
Read more