CreateTemplate, CreatePartialTemplate, RenderTemplate

Share your advanced knowledge/code with the community.
User avatar
eddy
Posts: 124
Joined: Thu Mar 27, 2014 8:34 am

CreateTemplate, CreatePartialTemplate, RenderTemplate

Post by eddy »

- Page templating
- using HandleBars : http://handlebarsjs.com/

Code: Select all

Procedure.s RenderTemplate(Template, Context, TargetElement.s="")
  !var htmlCode=v_Template(v_Context);
  !v_TargetElement && $(v_TargetElement).html(htmlCode);
  !return htmlCode;
EndProcedure

Import ""
  CreatePartialTemplate(PartialName.s, TemplateSource.s) As "Handlebars.registerPartial"
  CreateTemplate.i(TemplateSource.s) As "Handlebars.compile"
EndImport

CompilerIf #PB_Compiler_IsMainFile
  
  Procedure.i LoadAsynchronously(FileName.s, *OnLoadFunction, FileType.s)
    !return $.ajax({ url:v_FileName, dataType:v_FileType, beforeSend:function(jqxhr, settings) { jqxhr.url = settings.url; } })
    !.done(function(data, status, jqxhr) { p_OnLoadFunction(data,status,jqxhr.url); })
    !.fail(function(jqxhr, status, errorThrown) { p_OnLoadFunction('',status,jqxhr.url,jqxhr.status,errorThrown); });
  EndProcedure 
  
  Procedure.i LoadScript(FileName.s, *OnLoadFunction)
    ProcedureReturn LoadAsynchronously(FileName, *OnLoadFunction, "script")
  EndProcedure
  
  ; *************************
  ; EXAMPLE - Templating
  ; *************************
  Procedure ScriptLoaded()
    Protected context
    !v_context = { "people":[
    !  { "name": "Alan", "id": 1 },
    !  { "name": "Yehuda", "id": 2 }
    !]};
    
    CreatePartialTemplate("link","<a href='/people/{{id}}'>{{name}}</a>")
    template=CreateTemplate("<ul>{{#people}}<li>{{> link}}</li>{{/people}}</ul>")    
    RenderTemplate(template,context,"body")
  EndProcedure
  
  LoadScript("https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.2/handlebars.js",@ScriptLoaded());  
CompilerEndIf