Skip to content

jsRender.md

Latest commit

 

History

History
143 lines (94 loc) · 1.85 KB

jsRender.md

File metadata and controls

143 lines (94 loc) · 1.85 KB

jsRender

access variable

<div>
   <em>Name:</em> {{:name}}
   {{if showNickname && nickname}}
      (Goes by <em>{{:nickname}}</em>)
   {{/if}}
</div>

access parent variable

Example:

onclick="showCallMeModal({{:#parent.parent.data.parentVariableName}})"

access sub variable

Dot.notation!

if statement

<script id="personTmpl" type="text/x-jsrender">
  {{if nickname}}
    Nickname: {{:nickname}}
  {{else name}}
    Name: {{:name}}
  {{else}}
    No name provided
  {{/if}}
</script>

comment

They are multi-line!

{{!-- <div> 
      </div>
--}}

for statement

{{:index}} contain the index number

{{for myArray}}
  ...
  {{:#index}}
  ...
{{/for}}

for sort

You can sort elements!

{{for array sort="firstName" }}...{{/for}}

pay caution to sub variables!

es:

{{for array sort="com.asd.firstName" }}...{{/for}}

example: "if is the first index then ..."

{{if #index == 0}}...{{/fi}}

VERY VERY IMPORTANT

VARIABLES INSIDE FOR HAVE THEY OWN CONTEXT

SO IF YOU WANT TO ACCESS A VARIABLE OUTSIDE THE FOR, YOU HAVE TO USE THIS SYNTAX

{{for items}}
   {{if #parent.parent.data.variableOutsideTheFor)}}{{:#index}}{{/if}}
{{/for}}

VERY IMPORTANT

VERY VERY IMPORTANT

SAME THINGS FOR EVERY CODE BLOCK, IF BLOCK TOO!!!

script inside the script!

Use this kind of trick:

{{:"<"}}script type="text/javascript">
    alert('1');
{{:"<"}}/script>

common errors and mistakes

  • variable undefined even if you know it exists? take a look to the parent notation here