- 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