application-prototype
Version:
Application builder - prototype
573 lines (503 loc) • 45.5 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>constructors/js-template-component.js - Application Prototype - Framework</title>
<meta name="description" content="Application Prototype Framework based on Module Pattern" />
<meta name="keywords" content="javascript, js, application-prototype, prototype" />
<meta name="keyword" content="javascript, js, application-prototype, prototype" />
<meta property="og:title" content="Application Prototype - Framework"/>
<meta property="og:type" content="website"/>
<meta property="og:image" content=""/>
<meta property="og:url" content="https://labs.sgapps.io/open-source/application-prototype"/>
<script src="scripts/prettify/prettify.js"></script>
<script src="scripts/prettify/lang-css.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
<script src="scripts/nav.js" defer></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
<div class="navicon"></div>
</label>
<label for="nav-trigger" class="overlay"></label>
<nav class="wrap">
<input type="text" id="nav-search" placeholder="Search" />
<h2><a href="index.html">Home</a></h2><h2><a href="https://labs.sgapps.io/open-source/application-prototype" target="_blank" class="menu-item" id="website_link" >Project Page ( Git Lab )</a></h2><h2><a href="http://gordienco.net/" target="_blank" class="menu-item" id="website_link" >About Me</a></h2><h2><a href="https://github.com/sergiu-gordienco/application-prototype" target="_blank" class="menu-item" id="github_link" >GitHub</a></h2><h3>Modules</h3><ul><li><a href="module-uriLoad.html">uriLoad</a><ul class='methods'><li data-type='method' style='display: none;'><a href="module-uriLoad.html#.link">link</a></li><li data-type='method' style='display: none;'><a href="module-uriLoad.html#.script">script</a></li></ul></li></ul><h3>Classes</h3><ul><li><a href="ApplicationPrototype.Builder.html">Builder</a><ul class='methods'><li data-type='method' style='display: none;'><a href="ApplicationPrototype.Builder.html#bind">bind</a></li><li data-type='method' style='display: none;'><a href="ApplicationPrototype.Builder.html#consoleOptions">consoleOptions</a></li><li data-type='method' style='display: none;'><a href="ApplicationPrototype.Builder.html#crudEvents">crudEvents</a></li><li data-type='method' style='display: none;'><a href="ApplicationPrototype.Builder.html#debugEnabled">debugEnabled</a></li><li data-type='method' style='display: none;'><a href="ApplicationPrototype.Builder.html#emit">emit</a></li><li data-type='method' style='display: none;'><a href="ApplicationPrototype.Builder.html#isBrowser">isBrowser</a></li><li data-type='method' style='display: none;'><a href="ApplicationPrototype.Builder.html#isNode">isNode</a></li><li data-type='method' style='display: none;'><a href="ApplicationPrototype.Builder.html#modulePath">modulePath</a></li><li data-type='method' style='display: none;'><a href="ApplicationPrototype.Builder.html#moduleRegister">moduleRegister</a></li><li data-type='method' style='display: none;'><a href="ApplicationPrototype.Builder.html#off">off</a></li><li data-type='method' style='display: none;'><a href="ApplicationPrototype.Builder.html#on">on</a></li><li data-type='method' style='display: none;'><a href="ApplicationPrototype.Builder.html#once">once</a></li><li data-type='method' style='display: none;'><a href="ApplicationPrototype.Builder.html#property">property</a></li><li data-type='method' style='display: none;'><a href="ApplicationPrototype.Builder.html#require">require</a></li><li data-type='method' style='display: none;'><a href="ApplicationPrototype.Builder.html#runModulesInFiles">runModulesInFiles</a></li></ul></li><li class="level-hide"><a href="ApplicationPrototype.Builder.Promise.html">Promise</a><ul class='methods'><li data-type='method' style='display: none;'><a href="ApplicationPrototype.Builder.Promise.html#.all">all</a></li><li data-type='method' style='display: none;'><a href="ApplicationPrototype.Builder.Promise.html#.race">race</a></li><li data-type='method' style='display: none;'><a href="ApplicationPrototype.Builder.Promise.html#.reject">reject</a></li><li data-type='method' style='display: none;'><a href="ApplicationPrototype.Builder.Promise.html#.resolve">resolve</a></li></ul></li><li><a href="ApplicationPrototype.Instance.html">Instance</a><ul class='methods'><li data-type='method' style='display: none;'><a href="ApplicationPrototype.Instance.html#bind">bind</a></li><li data-type='method' style='display: none;'><a href="ApplicationPrototype.Instance.html#crudEvents">crudEvents</a></li><li data-type='method' style='display: none;'><a href="ApplicationPrototype.Instance.html#emit">emit</a></li><li data-type='method' style='display: none;'><a href="ApplicationPrototype.Instance.html#off">off</a></li><li data-type='method' style='display: none;'><a href="ApplicationPrototype.Instance.html#on">on</a></li><li data-type='method' style='display: none;'><a href="ApplicationPrototype.Instance.html#once">once</a></li><li data-type='method' style='display: none;'><a href="ApplicationPrototype.Instance.html#property">property</a></li><li data-type='method' style='display: none;'><a href="ApplicationPrototype.Instance.html#property">property</a></li></ul></li><li><a href="async.Async.html">Async</a><ul class='methods'><li data-type='method' style='display: none;'><a href="async.Async.html#done">done</a></li><li data-type='method' style='display: none;'><a href="async.Async.html#errors">errors</a></li><li data-type='method' style='display: none;'><a href="async.Async.html#flush">flush</a></li><li data-type='method' style='display: none;'><a href="async.Async.html#index">index</a></li><li data-type='method' style='display: none;'><a href="async.Async.html#processing">processing</a></li><li data-type='method' style='display: none;'><a href="async.Async.html#receive">receive</a></li><li data-type='method' style='display: none;'><a href="async.Async.html#reserve">reserve</a></li><li data-type='method' style='display: none;'><a href="async.Async.html#responses">responses</a></li><li data-type='method' style='display: none;'><a href="async.Async.html#run">run</a></li><li data-type='method' style='display: none;'><a href="async.Async.html#wait">wait</a></li></ul></li><li><a href="ExtensionsPrototype.slDOMSet.html">slDOMSet</a><ul class='methods'><li data-type='method' style='display: none;'><a href="ExtensionsPrototype.slDOMSet.html#add">add</a></li><li data-type='method' style='display: none;'><a href="ExtensionsPrototype.slDOMSet.html#attr">attr</a></li><li data-type='method' style='display: none;'><a href="ExtensionsPrototype.slDOMSet.html#attr">attr</a></li><li data-type='method' style='display: none;'><a href="ExtensionsPrototype.slDOMSet.html#attr">attr</a></li><li data-type='method' style='display: none;'><a href="ExtensionsPrototype.slDOMSet.html#attr">attr</a></li><li data-type='method' style='display: none;'><a href="ExtensionsPrototype.slDOMSet.html#config">config</a></li><li data-type='method' style='display: none;'><a href="ExtensionsPrototype.slDOMSet.html#config">config</a></li><li data-type='method' style='display: none;'><a href="ExtensionsPrototype.slDOMSet.html#each">each</a></li><li data-type='method' style='display: none;'><a href="ExtensionsPrototype.slDOMSet.html#env">env</a></li><li data-type='method' style='display: none;'><a href="ExtensionsPrototype.slDOMSet.html#eq">eq</a></li><li data-type='method' style='display: none;'><a href="ExtensionsPrototype.slDOMSet.html#filter">filter</a></li><li data-type='method' style='display: none;'><a href="ExtensionsPrototype.slDOMSet.html#find">find</a></li><li data-type='method' style='display: none;'><a href="ExtensionsPrototype.slDOMSet.html#get">get</a></li><li data-type='method' style='display: none;'><a href="ExtensionsPrototype.slDOMSet.html#get">get</a></li><li data-type='method' style='display: none;'><a href="ExtensionsPrototype.slDOMSet.html#map">map</a></li><li data-type='method' style='display: none;'><a href="ExtensionsPrototype.slDOMSet.html#set">set</a></li><li data-type='method' style='display: none;'><a href="ExtensionsPrototype.slDOMSet.html#set">set</a></li><li data-type='method' style='display: none;'><a href="ExtensionsPrototype.slDOMSet.html#unique">unique</a></li></ul></li><li><a href="JSTemplateComponent.html">JSTemplateComponent</a></li><li><a href="RequestModule.html">RequestModule</a><ul class='members'><li data-type='member' style='display: none;'><a href="RequestModule.html#.READY_STATE_DONE">READY_STATE_DONE</a></li><li data-type='member' style='display: none;'><a href="RequestModule.html#.READY_STATE_HEADERS_RECEIVED">READY_STATE_HEADERS_RECEIVED</a></li><li data-type='member' style='display: none;'><a href="RequestModule.html#.READY_STATE_LOADING">READY_STATE_LOADING</a></li><li data-type='member' style='display: none;'><a href="RequestModule.html#.READY_STATE_OPENED">READY_STATE_OPENED</a></li><li data-type='member' style='display: none;'><a href="RequestModule.html#.READY_STATE_UNSENT">READY_STATE_UNSENT</a></li></ul><ul class='methods'><li data-type='method' style='display: none;'><a href="RequestModule.html#.ParamsParser">ParamsParser</a></li><li data-type='method' style='display: none;'><a href="RequestModule.html#async">async</a></li><li data-type='method' style='display: none;'><a href="RequestModule.html#async">async</a></li><li data-type='method' style='display: none;'><a href="RequestModule.html#basicAuth">basicAuth</a></li><li data-type='method' style='display: none;'><a href="RequestModule.html#basicAuth">basicAuth</a></li><li data-type='method' style='display: none;'><a href="RequestModule.html#config">config</a></li><li data-type='method' style='display: none;'><a href="RequestModule.html#configurator">configurator</a></li><li data-type='method' style='display: none;'><a href="RequestModule.html#headers">headers</a></li><li data-type='method' style='display: none;'><a href="RequestModule.html#headers">headers</a></li><li data-type='method' style='display: none;'><a href="RequestModule.html#method">method</a></li><li data-type='method' style='display: none;'><a href="RequestModule.html#method">method</a></li><li data-type='method' style='display: none;'><a href="RequestModule.html#open">open</a></li><li data-type='method' style='display: none;'><a href="RequestModule.html#readyState">readyState</a></li><li data-type='method' style='display: none;'><a href="RequestModule.html#request">request</a></li><li data-type='method' style='display: none;'><a href="RequestModule.html#response">response</a></li><li data-type='method' style='display: none;'><a href="RequestModule.html#send">send</a></li><li data-type='method' style='display: none;'><a href="RequestModule.html#status">status</a></li><li data-type='method' style='display: none;'><a href="RequestModule.html#statusText">statusText</a></li><li data-type='method' style='display: none;'><a href="RequestModule.html#timeout">timeout</a></li><li data-type='method' style='display: none;'><a href="RequestModule.html#timeout">timeout</a></li><li data-type='method' style='display: none;'><a href="RequestModule.html#url">url</a></li><li data-type='method' style='display: none;'><a href="RequestModule.html#url">url</a></li><li data-type='method' style='display: none;'><a href="RequestModule.html#withCredentials">withCredentials</a></li><li data-type='method' style='display: none;'><a href="RequestModule.html#withCredentials">withCredentials</a></li></ul></li></ul><h3>Events</h3><ul><li class="level-hide"><a href="ApplicationPrototype.Instance.html#.event:__afterGet">__afterGet</a></li><li class="level-hide"><a href="ApplicationPrototype.Instance.html#.event:__afterGet::propName">__afterGet::propName</a></li><li class="level-hide"><a href="ApplicationPrototype.Instance.html#.event:__afterSet">__afterSet</a></li><li class="level-hide"><a href="ApplicationPrototype.Instance.html#.event:__afterSet::propName">__afterSet::propName</a></li><li class="level-hide"><a href="ApplicationPrototype.Instance.html#.event:__onGet">__onGet</a></li><li class="level-hide"><a href="ApplicationPrototype.Instance.html#.event:__onGet::propName">__onGet::propName</a></li><li class="level-hide"><a href="ApplicationPrototype.Instance.html#.event:__onSet">__onSet</a></li><li class="level-hide"><a href="ApplicationPrototype.Instance.html#.event:__onSet::propName">__onSet::propName</a></li></ul><h3>Interfaces</h3><ul><li><a href="ApplicationPrototype.html">ApplicationPrototype</a></li><li><a href="Array.html">Array</a><ul class='methods'><li data-type='method' style='display: none;'><a href="Array.html#__pointerFilter">__pointerFilter</a></li><li data-type='method' style='display: none;'><a href="Array.html#base64encode">base64encode</a></li><li data-type='method' style='display: none;'><a href="Array.html#bytesToHex">bytesToHex</a></li><li data-type='method' style='display: none;'><a href="Array.html#inArray">inArray</a></li><li data-type='method' style='display: none;'><a href="Array.html#indexOfSect">indexOfSect</a></li><li data-type='method' style='display: none;'><a href="Array.html#max">max</a></li><li data-type='method' style='display: none;'><a href="Array.html#min">min</a></li><li data-type='method' style='display: none;'><a href="Array.html#move">move</a></li><li data-type='method' style='display: none;'><a href="Array.html#resetArray">resetArray</a></li><li data-type='method' style='display: none;'><a href="Array.html#shuffle">shuffle</a></li><li data-type='method' style='display: none;'><a href="Array.html#split">split</a></li><li data-type='method' style='display: none;'><a href="Array.html#splitSect">splitSect</a></li><li data-type='method' style='display: none;'><a href="Array.html#toBinaryString">toBinaryString</a></li><li data-type='method' style='display: none;'><a href="Array.html#toBlob">toBlob</a></li><li data-type='method' style='display: none;'><a href="Array.html#toBytesBinary">toBytesBinary</a></li><li data-type='method' style='display: none;'><a href="Array.html#toBytesEscaped">toBytesEscaped</a></li><li data-type='method' style='display: none;'><a href="Array.html#toParamObj">toParamObj</a></li><li data-type='method' style='display: none;'><a href="Array.html#toStringUtf8">toStringUtf8</a></li><li data-type='method' style='display: none;'><a href="Array.html#unique">unique</a></li></ul></li><li><a href="ArrayBuffer.html">ArrayBuffer</a><ul class='methods'><li data-type='method' style='display: none;'><a href="ArrayBuffer.html#base64encode">base64encode</a></li><li data-type='method' style='display: none;'><a href="ArrayBuffer.html#toArray">toArray</a></li><li data-type='method' style='display: none;'><a href="ArrayBuffer.html#toBytes">toBytes</a></li><li data-type='method' style='display: none;'><a href="ArrayBuffer.html#toStringUtf8">toStringUtf8</a></li></ul></li><li><a href="async.html">async</a><ul class='methods'><li data-type='method' style='display: none;'><a href="async.html#.flow">flow</a></li><li data-type='method' style='display: none;'><a href="async.html#.flow_map">flow_map</a></li><li data-type='method' style='display: none;'><a href="async.html#.map">map</a></li><li data-type='method' style='display: none;'><a href="async.html#.waterfall">waterfall</a></li><li data-type='method' style='display: none;'><a href="async.html#.waterfall_map">waterfall_map</a></li></ul></li><li><a href="Blob.html">Blob</a><ul class='methods'><li data-type='method' style='display: none;'><a href="Blob.html#toArrayBuffer">toArrayBuffer</a></li><li data-type='method' style='display: none;'><a href="Blob.html#toURL">toURL</a></li></ul></li><li><a href="BrowserSessionModule.html">BrowserSessionModule</a><ul class='methods'><li data-type='method' style='display: none;'><a href="BrowserSessionModule.html#.clear">clear</a></li><li data-type='method' style='display: none;'><a href="BrowserSessionModule.html#.findItems">findItems</a></li><li data-type='method' style='display: none;'><a href="BrowserSessionModule.html#.getItem">getItem</a></li><li data-type='method' style='display: none;'><a href="BrowserSessionModule.html#.getItems">getItems</a></li><li data-type='method' style='display: none;'><a href="BrowserSessionModule.html#.removeItem">removeItem</a></li><li data-type='method' style='display: none;'><a href="BrowserSessionModule.html#.removeItems">removeItems</a></li><li data-type='method' style='display: none;'><a href="BrowserSessionModule.html#.setItem">setItem</a></li><li data-type='method' style='display: none;'><a href="BrowserSessionModule.html#.setItems">setItems</a></li></ul></li><li><a href="Buffer.html">Buffer</a><ul class='methods'><li data-type='method' style='display: none;'><a href="Buffer.html#base64encode">base64encode</a></li><li data-type='method' style='display: none;'><a href="Buffer.html#toArray">toArray</a></li><li data-type='method' style='display: none;'><a href="Buffer.html#toBytes">toBytes</a></li><li data-type='method' style='display: none;'><a href="Buffer.html#toStringUtf8">toStringUtf8</a></li></ul></li><li><a href="ExtensionsPrototype.html">ExtensionsPrototype</a><ul class='members'><li data-type='member' style='display: none;'><a href="ExtensionsPrototype.html#._">_</a></li><li data-type='member' style='display: none;'><a href="ExtensionsPrototype.html#.__">__</a></li><li data-type='member' style='display: none;'><a href="ExtensionsPrototype.html#.fn">fn</a></li><li data-type='member' style='display: none;'><a href="ExtensionsPrototype.html#.object">object</a></li><li data-type='member' style='display: none;'><a href="ExtensionsPrototype.html#.string">string</a></li><li data-type='member' style='display: none;'><a href="ExtensionsPrototype.html#.WindowExtend">WindowExtend</a></li></ul></li><li><a href="Function.html">Function</a><ul class='methods'><li data-type='method' style='display: none;'><a href="Function.html#runInWorker">runInWorker</a></li><li data-type='method' style='display: none;'><a href="Function.html#toWorker">toWorker</a></li><li data-type='method' style='display: none;'><a href="Function.html#toWorkerURL">toWorkerURL</a></li></ul></li><li><a href="HTMLElement.html">HTMLElement</a></li><li><a href="JSTemplate.html">JSTemplate</a><ul class='methods'><li data-type='method' style='display: none;'><a href="JSTemplate.html#.attrParser">attrParser</a></li><li data-type='method' style='display: none;'><a href="JSTemplate.html#.expressionBuilder">expressionBuilder</a></li><li data-type='method' style='display: none;'><a href="JSTemplate.html#.nodeParser">nodeParser</a></li><li data-type='method' style='display: none;'><a href="JSTemplate.html#.parseTextNodes">parseTextNodes</a></li><li data-type='method' style='display: none;'><a href="JSTemplate.html#.textParser">textParser</a></li></ul></li><li><a href="JSTemplateComponent.contextInstance.html">contextInstance</a><ul class='members'><li data-type='member' style='display: none;'><a href="JSTemplateComponent.contextInstance.html#.node">node</a></li><li data-type='member' style='display: none;'><a href="JSTemplateComponent.contextInstance.html#.references">references</a></li></ul><ul class='methods'><li data-type='method' style='display: none;'><a href="JSTemplateComponent.contextInstance.html#.redraw">redraw</a></li><li data-type='method' style='display: none;'><a href="JSTemplateComponent.contextInstance.html#.redrawForce">redrawForce</a></li></ul></li><li><a href="JSTemplateComponent.contextWithInstance.html">contextWithInstance</a><ul class='members'><li data-type='member' style='display: none;'><a href="JSTemplateComponent.contextWithInstance.html#.__instance">__instance</a></li><li data-type='member' style='display: none;'><a href="JSTemplateComponent.contextWithInstance.html#.__lifeCycle">__lifeCycle</a></li><li data-type='member' style='display: none;'><a href="JSTemplateComponent.contextWithInstance.html#.state">state</a></li></ul></li><li><a href="JSTemplateComponent.contextWithoutInstance.html">contextWithoutInstance</a><ul class='members'><li data-type='member' style='display: none;'><a href="JSTemplateComponent.contextWithoutInstance.html#.__lifeCycle">__lifeCycle</a></li><li data-type='member' style='display: none;'><a href="JSTemplateComponent.contextWithoutInstance.html#.state">state</a></li></ul></li><li><a href="String.html">String</a><ul class='methods'><li data-type='method' style='display: none;'><a href="String.html#add_Class">add_Class</a></li><li data-type='method' style='display: none;'><a href="String.html#add_Class">add_Class</a></li><li data-type='method' style='display: none;'><a href="String.html#base64decode">base64decode</a></li><li data-type='method' style='display: none;'><a href="String.html#base64decode">base64decode</a></li><li data-type='method' style='display: none;'><a href="String.html#base64decodeBytes">base64decodeBytes</a></li><li data-type='method' style='display: none;'><a href="String.html#base64decodeBytes">base64decodeBytes</a></li><li data-type='method' style='display: none;'><a href="String.html#base64decodeBytesArray">base64decodeBytesArray</a></li><li data-type='method' style='display: none;'><a href="String.html#base64decodeBytesArray">base64decodeBytesArray</a></li><li data-type='method' style='display: none;'><a href="String.html#base64decodeClean">base64decodeClean</a></li><li data-type='method' style='display: none;'><a href="String.html#base64decodeClean">base64decodeClean</a></li><li data-type='method' style='display: none;'><a href="String.html#base64encode">base64encode</a></li><li data-type='method' style='display: none;'><a href="String.html#base64encode">base64encode</a></li><li data-type='method' style='display: none;'><a href="String.html#base64encodeBytes">base64encodeBytes</a></li><li data-type='method' style='display: none;'><a href="String.html#base64encodeBytes">base64encodeBytes</a></li><li data-type='method' style='display: none;'><a href="String.html#base64encodeBytesArray">base64encodeBytesArray</a></li><li data-type='method' style='display: none;'><a href="String.html#base64encodeBytesArray">base64encodeBytesArray</a></li><li data-type='method' style='display: none;'><a href="String.html#base64encodeClean">base64encodeClean</a></li><li data-type='method' style='display: none;'><a href="String.html#base64encodeClean">base64encodeClean</a></li><li data-type='method' style='display: none;'><a href="String.html#buildQuery">buildQuery</a></li><li data-type='method' style='display: none;'><a href="String.html#buildQuery">buildQuery</a></li><li data-type='method' style='display: none;'><a href="String.html#buildSearchArray">buildSearchArray</a></li><li data-type='method' style='display: none;'><a href="String.html#buildSearchArray">buildSearchArray</a></li><li data-type='method' style='display: none;'><a href="String.html#cleanTags">cleanTags</a></li><li data-type='method' style='display: none;'><a href="String.html#cleanTags">cleanTags</a></li><li data-type='method' style='display: none;'><a href="String.html#decodeURI">decodeURI</a></li><li data-type='method' style='display: none;'><a href="String.html#decodeURI">decodeURI</a></li><li data-type='method' style='display: none;'><a href="String.html#decryptAes">decryptAes</a></li><li data-type='method' style='display: none;'><a href="String.html#decryptAes">decryptAes</a></li><li data-type='method' style='display: none;'><a href="String.html#decryptTea">decryptTea</a></li><li data-type='method' style='display: none;'><a href="String.html#decryptTea">decryptTea</a></li><li data-type='method' style='display: none;'><a href="String.html#del_Class">del_Class</a></li><li data-type='method' style='display: none;'><a href="String.html#del_Class">del_Class</a></li><li data-type='method' style='display: none;'><a href="String.html#encodeURI">encodeURI</a></li><li data-type='method' style='display: none;'><a href="String.html#encodeURI">encodeURI</a></li><li data-type='method' style='display: none;'><a href="String.html#encryptAes">encryptAes</a></li><li data-type='method' style='display: none;'><a href="String.html#encryptAes">encryptAes</a></li><li data-type='method' style='display: none;'><a href="String.html#encryptTea">encryptTea</a></li><li data-type='method' style='display: none;'><a href="String.html#encryptTea">encryptTea</a></li><li data-type='method' style='display: none;'><a href="String.html#escape">escape</a></li><li data-type='method' style='display: none;'><a href="String.html#escape">escape</a></li><li data-type='method' style='display: none;'><a href="String.html#escapeHex">escapeHex</a></li><li data-type='method' style='display: none;'><a href="String.html#escapeHex">escapeHex</a></li><li data-type='method' style='display: none;'><a href="String.html#fnd_Class">fnd_Class</a></li><li data-type='method' style='display: none;'><a href="String.html#fnd_Class">fnd_Class</a></li><li data-type='method' style='display: none;'><a href="String.html#fromHex">fromHex</a></li><li data-type='method' style='display: none;'><a href="String.html#fromHex">fromHex</a></li><li data-type='method' style='display: none;'><a href="String.html#fromHtml">fromHtml</a></li><li data-type='method' style='display: none;'><a href="String.html#fromHtml">fromHtml</a></li><li data-type='method' style='display: none;'><a href="String.html#lcfirst">lcfirst</a></li><li data-type='method' style='display: none;'><a href="String.html#lcfirst">lcfirst</a></li><li data-type='method' style='display: none;'><a href="String.html#markdown">markdown</a></li><li data-type='method' style='display: none;'><a href="String.html#match_str">match_str</a></li><li data-type='method' style='display: none;'><a href="String.html#match_str">match_str</a></li><li data-type='method' style='display: none;'><a href="String.html#md5">md5</a></li><li data-type='method' style='display: none;'><a href="String.html#md5">md5</a></li><li data-type='method' style='display: none;'><a href="String.html#parseUrl">parseUrl</a></li><li data-type='method' style='display: none;'><a href="String.html#parseUrl">parseUrl</a></li><li data-type='method' style='display: none;'><a href="String.html#parseUrlVars">parseUrlVars</a></li><li data-type='method' style='display: none;'><a href="String.html#sha1">sha1</a></li><li data-type='method' style='display: none;'><a href="String.html#sha1">sha1</a></li><li data-type='method' style='display: none;'><a href="String.html#sha256">sha256</a></li><li data-type='method' style='display: none;'><a href="String.html#sha256">sha256</a></li><li data-type='method' style='display: none;'><a href="String.html#subs">subs</a></li><li data-type='method' style='display: none;'><a href="String.html#subs">subs</a></li><li data-type='method' style='display: none;'><a href="String.html#subs">subs</a></li><li data-type='method' style='display: none;'><a href="String.html#swp_case">swp_case</a></li><li data-type='method' style='display: none;'><a href="String.html#swp_case">swp_case</a></li><li data-type='method' style='display: none;'><a href="String.html#toArrayBufferFromUtf8">toArrayBufferFromUtf8</a></li><li data-type='method' style='display: none;'><a href="String.html#toArrayBufferFromUtf8">toArrayBufferFromUtf8</a></li><li data-type='method' style='display: none;'><a href="String.html#toHex">toHex</a></li><li data-type='method' style='display: none;'><a href="String.html#toHex">toHex</a></li><li data-type='method' style='display: none;'><a href="String.html#toHtml">toHtml</a></li><li data-type='method' style='display: none;'><a href="String.html#toHtml">toHtml</a></li><li data-type='method' style='display: none;'><a href="String.html#toHtmlSimple">toHtmlSimple</a></li><li data-type='method' style='display: none;'><a href="String.html#toHtmlSimple">toHtmlSimple</a></li><li data-type='method' style='display: none;'><a href="String.html#toRegexp">toRegexp</a></li><li data-type='method' style='display: none;'><a href="String.html#toRegexp">toRegexp</a></li><li data-type='method' style='display: none;'><a href="String.html#ucfirst">ucfirst</a></li><li data-type='method' style='display: none;'><a href="String.html#ucfirst">ucfirst</a></li><li data-type='method' style='display: none;'><a href="String.html#unescape">unescape</a></li><li data-type='method' style='display: none;'><a href="String.html#unescape">unescape</a></li><li data-type='method' style='display: none;'><a href="String.html#unicode">unicode</a></li><li data-type='method' style='display: none;'><a href="String.html#unicode">unicode</a></li><li data-type='method' style='display: none;'><a href="String.html#utf8">utf8</a></li><li data-type='method' style='display: none;'><a href="String.html#utf8">utf8</a></li><li data-type='method' style='display: none;'><a href="String.html#utf8decode">utf8decode</a></li><li data-type='method' style='display: none;'><a href="String.html#utf8decode">utf8decode</a></li><li data-type='method' style='display: none;'><a href="String.html#utf8encode">utf8encode</a></li><li data-type='method' style='display: none;'><a href="String.html#utf8encode">utf8encode</a></li><li data-type='method' style='display: none;'><a href="String.html#utf8need">utf8need</a></li><li data-type='method' style='display: none;'><a href="String.html#utf8need">utf8need</a></li></ul></li><li></li></ul><h3>Global</h3><ul><li><a href="global.html#ApplicationBuilderConstructor">ApplicationBuilderConstructor</a></li><li><a href="global.html#ApplicationBuilderExports">ApplicationBuilderExports</a></li><li><a href="global.html#ApplicationPrototypeConstructor">ApplicationPrototypeConstructor</a></li><li><a href="global.html#NodeInterface">NodeInterface</a></li><li><a href="global.html#RequestModuleConstructor">RequestModuleConstructor</a></li></ul>
</nav>
<div id="main">
<h1 class="page-title">constructors/js-template-component.js</h1>
<section>
<article>
<pre class="prettyprint source linenums"><code>//@
/**
* @example
* Application.require('js-template-component')
* .then(function (
* // @type {JSTemplateComponent}
* JSTemplateComponentConstructor
* ) {
* new JSTemplateComponentConstructor(
* 'my-custom-tagname',
* {
* context: {
* numberOfClicks: 0
* },
* templateCode: `
* <div>
* {{ this.numberOfClicks }}
* <button (click)="this.increaseClicksNumber()">
* </button>
* </div>
* `,
* sharedPrototypeMethods: {
* increaseClicksNumber: function () {
* this.numberOfClicks += 1;
* }
* },
* sharedReferences: {},
* cssStyles: [
* '/some/styles/style.css'
* ]
* },
* function (err) {
* if (err) console.error(err);
* }
* );
* }).catch(console.error);
* @class
* @name JSTemplateComponent
* @param {string} tagName
* @param {JSTemplateComponent.options} options
* @param {JSTemplateComponent.constructorCallback} callback
*/;
/**
* @memberof JSTemplateComponent
* @callback Builder
* @param {string} tagName
* @param {JSTemplateComponent.options} options
* @param {JSTemplateComponent.constructorCallback} callback
* @returns {JSTemplateComponent}
*/
/**
* @memberof JSTemplateComponent
* @interface contextInstance
*/
/**
* @memberof JSTemplateComponent.contextInstance
* @method redraw
*/
/**
* @memberof JSTemplateComponent.contextInstance
* @method redrawForce
*/
/**
* @memberof JSTemplateComponent.contextInstance
* @name references
* @type {Object<string,any>}
*/
/**
* @memberof JSTemplateComponent.contextInstance
* @name node
* @type {HTMLElement}
*/
/**
* @memberof JSTemplateComponent
* @typedef {object} contextLifeCycle
* @property {JSTemplateComponent.lifeCycleCallback} [init] callbacks on init
* @property {JSTemplateComponent.lifeCycleCallbackGetReferences} [getReferences] returns
* @property {JSTemplateComponent.lifeCycleCallback} [contentChange] callback on content change
* @property {JSTemplateComponent.lifeCycleCallback} [attrChange] context object default is Node
* @property {JSTemplateComponent.lifeCycleCallback} [remove] context object default is Node
*/
/**
* @memberof JSTemplateComponent
* @interface contextWithInstance
* @implements JSTemplateComponent.contextInstance
*/
/**
* @memberof JSTemplateComponent.contextWithInstance
* @name __instance
* @type {JSTemplateComponent.contextInstance}
*/
/**
* @memberof JSTemplateComponent.contextWithInstance
* @description context object default is Node
* @name __lifeCycle
* @type {JSTemplateComponent.contextLifeCycle}
*/
/**
* @memberof JSTemplateComponent.contextWithInstance
* @description context object default is Node
* @name state
* @type {Object<string,(string|number|Object<string,any>|null|any[])>}
*/
/**
* @memberof JSTemplateComponent
* @interface contextWithoutInstance
*/
/**
* @memberof JSTemplateComponent.contextWithoutInstance
* @description context object default is Node
* @name __lifeCycle
* @type {JSTemplateComponent.contextLifeCycle}
*/
/**
* @memberof JSTemplateComponent.contextWithoutInstance
* @description context object default is Node
* @name state
* @type {Object<string,(string|number|Object<string,any>|null|any[])>}
*/
/**
* @memberof JSTemplateComponent
* @typedef {object} options
* @property {function ():JSTemplateComponent.contextWithoutInstance} [context] context object default is Node
* @property {JSTemplateComponent.contextLifeCycle} [__lifeCycle] context object default is Node
* @property {string} [templateCode] template Code
* @property {string} [templateUrl] template URL
* @property {Array<string>} [cssStyles] list of URLs that point to styles
* @property {object} [sharedReferences] references that will be same for all created components
* @property {object} [sharedPrototypeMethods] methods that will be on all components under method "methods"
* @property {boolean} [__flag_RejectOnStylesError=false]
*/
/**
* @memberof JSTemplateComponent
* @callback lifeCycleCallbackGetReferences
* @param {JSTemplateComponent.contextWithInstance} context
* @param {object} sharedReferences
* @param {object} sharedPrototypeMethods
* @returns {object}
*/
/**
* @memberof JSTemplateComponent
* @callback lifeCycleCallback
* @param {JSTemplateComponent.contextWithInstance} context
* @param {Object<string,any>} references
* @param {Object<string,any>} methods
*/
/**
* @memberof JSTemplateComponent
* @callback constructorCallback
* @param {Error} err
*/
function JSTemplateComponentConstructor(
/**
* @private
* @type {string}
*/
tagName,
/**
* @private
* @type {JSTemplateComponent.options}
*/
options,
/**
* @private
* @type {JSTemplateComponent.constructorCallback}
*/
callback
) {
//@ts-ignore
Application.require([
"uriLoad :: uri-load",
"customElements :: custom-elements",
"JSTemplate :: js-template",
"request"
]).then(function (lib) {
/**
* @private
* @var {object} __instance
* @property {string} templateCode
*/
var __instance = {
templateCode : ''
};
function __getTemplate() {
if (options.templateCode) {
return Promise.resolve(options.templateCode);
} else if (options.templateUrl) {
return new Promise(function (resolve, reject) {
new lib.request().url(options.templateUrl)
.response("text")
.then(function (templateCode) {
__instance.templateCode = templateCode;
resolve();
}).catch(reject);
});
} else {
return Promise.reject(Error('[OPTIONS_ERROR]: should be defined `templateCode` or `templateUrl`'));
}
}
function __loadCssStyles() {
if (!options.cssStyles.length) {
return Promise.resolve();
}
return new Promise(function (resolve, reject) {
lib.uriLoad.link(
options.cssStyles,
function (err) {
if (err) {
if (options.__flag_RejectOnStylesError) {
reject(err);
} else {
resolve();
}
} else {
resolve();
}
}
);
});
}
__getTemplate().then(
function () {
__loadCssStyles().then(
function () {
var sharedPrototypeMethods = options.sharedPrototypeMethods || {};
lib.customElements.registerMethods(
tagName,
Object.assign(
sharedPrototypeMethods,
{
"__onInit" :
/**
* @private
* @this {HTMLElement}
*/
function () {
/**
* @private
* @type {HTMLElement}
*/
var node = this;
/**
* @private
* @type {JSTemplateComponent.contextWithInstance}
*/
var _contextDefault = {
setState : function (state, callback) {
ComponentContext.state = Object.assign(
ComponentContext.state || {},
state || {}
);
ComponentContext.__requireRender = true;
ComponentContext.__instance.redraw();
if (callback) callback();
},
__requireRender: true,
__instance : {
node : node,
redraw : function () {
if (!ComponentContext.__requireRender) return;
//@ts-ignore
if (node.attrdata.JSRenderer) {
//@ts-ignore
ComponentContext.__requireRender = false;
node.attrdata.JSRenderer.content.redraw();
// /**
// * @deprecated
// */
// node.attrdata.JSRenderer.attr.redraw();
}
},
redrawForce: function () {
ComponentContext.__requireRender = true;
ComponentContext.__instance.redraw();
}
},
__lifeCycle: {
init: function () {
if (options.__lifeCycle && options.__lifeCycle.init) {
options.__lifeCycle.init(
ComponentContext,
envReferences,
sharedPrototypeMethods
);
}
},
attrChange: function () {
if (options.__lifeCycle && options.__lifeCycle.attrChange) {
options.__lifeCycle.attrChange(
ComponentContext,
envReferences,
sharedPrototypeMethods
);
}
},
getReferences: function () {
// dummy function
},
contentChange: function () {
if (options.__lifeCycle && options.__lifeCycle.contentChange) {
options.__lifeCycle.contentChange(
ComponentContext,
envReferences,
sharedPrototypeMethods
);
}
},
remove: function () {
if (options.__lifeCycle && options.__lifeCycle.remove) {
options.__lifeCycle.remove(
ComponentContext,
envReferences,
sharedPrototypeMethods
);
}
}
}
};
var sharedReferences = options.sharedReferences || {};
/**
* @private
* @type {JSTemplateComponent.contextWithInstance}
*/
var ComponentContext = Object.assign(
options.context ? (options.context(_contextDefault, sharedReferences, sharedPrototypeMethods) || {}) : {},
_contextDefault
);
var envReferences = Object.assign({}, sharedReferences);
if (options.__lifeCycle && options.__lifeCycle.getReferences) {
Object.assign(
envReferences,
options.__lifeCycle.getReferences(
ComponentContext,
sharedReferences,
sharedPrototypeMethods
) || {}
);
}
ComponentContext.__instance.references = envReferences;
node.innerHTML = __instance.templateCode;
// @ts-ignore
node.attrdata.JSRenderer = {
ComponentContext: ComponentContext,
envReferences: envReferences,
content : lib.JSTemplate.parseContent(node, function () {}, {
context : ComponentContext,
args : envReferences
}),
attr : lib.JSTemplate.parseAttributes(node, function () {}, {
context : ComponentContext,
args : envReferences
})
};
if (options.__lifeCycle && options.__lifeCycle.init) {
options.__lifeCycle.init.apply(
ComponentContext,
[
ComponentContext,
envReferences,
sharedPrototypeMethods
]
);
}
ComponentContext.__instance.redraw();
},
"__onContentChange" :
/**
* @private
* @this {HTMLElement}
*/
function () {
if (this.attrdata.JSRenderer && this.attrdata.JSRenderer.ComponentContext) {
if (
this.attrdata.JSRenderer.ComponentContext.__requireRender
// !this.attrdata.JSRenderer.ComponentContext.__instance.__renderStarted
) {
if (options.__lifeCycle && options.__lifeCycle.contentChange) {
options.__lifeCycle.contentChange.apply(
this.attrdata.JSRenderer.ComponentContext,
[
this.attrdata.JSRenderer.ComponentContext,
this.attrdata.JSRenderer.envReferences,
this.methods
]
);
}
this.attrdata.JSRenderer.ComponentContext.__instance.redraw();
}
}
},
"__onAttrChange" :
/**
* @private
* @this {HTMLElement}
*/
function () {
if (this.attrdata.JSRenderer && this.attrdata.JSRenderer.ComponentContext) {
if (
this.attrdata.JSRenderer.ComponentContext.__requireRender
// !this.attrdata.JSRenderer.ComponentContext.__instance.__renderStarted
) {
if (options.__lifeCycle && options.__lifeCycle.attrChange) {
options.__lifeCycle.attrChange.apply(
this.attrdata.JSRenderer.ComponentContext,
[
this.attrdata.JSRenderer.ComponentContext,
this.attrdata.JSRenderer.envReferences,
this.methods
]
);
}
this.attrdata.JSRenderer.ComponentContext.__instance.redraw();
}
}
},
"__onRemove" :
/**
* @private
* @this {HTMLElement}
*/
function () {
if (this.attrdata.JSRenderer) {
if (options.__lifeCycle && options.__lifeCycle.remove) {
options.__lifeCycle.remove.apply(
this.attrdata.JSRenderer.ComponentContext,
[
this.attrdata.JSRenderer.ComponentContext,
this.attrdata.JSRenderer.envReferences,
this.methods
]
);
}
}
}
}
)
);
}
).catch(function (err) {
callback(err);
});
}
).catch(function (err) {
callback(err);
});
}).catch(function (err) {
callback(err);
});
return this;
}
module.exports = JSTemplateComponentConstructor;
</code></pre>
</article>
</section>
</div>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.5</a> using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>
<script>prettyPrint();</script>
<script src="scripts/polyfill.js"></script>
<script src="scripts/linenumber.js"></script>
<script src="scripts/search.js" defer></script>
<script src="scripts/collapse.js" defer></script>
<script src="https://sgapps.io/components/sgapps-labs-examples/toolbar/loader.js"></script>
</body>
</html>