Giter Site home page Giter Site logo

orjstemplate's Introduction

###1.ejs

  • First example
<% for (var i = 0;i <people.length;i++) { %>
  <% if(people[i].length===2) { %>
    This is time
  <% } %>
  <strong><%= people[i] %></strong></br>
<% } %>
  • render
var data = {name: "Ke", age:1 };
var result = new EJS({url:'template.ejs'}).render(data);
$("#placeholder").html(result);
  • put it together
<script type="text/javascript">
  var data = {name: "Ke", age:1};
  var str = $("#testTemplate").html();
  var result = new EJS({text:str}).render(data);
  $("#placeholder").html(result);
</script>

<script id="testTemplate" type="text/x-ejs-template">
  <h1>Hello <%= name %></h1>
  You are <%= age %> years old.
</script>
  • Get data using jQuery's getJSON method
<body>
  <div id="resdiv"></div>
  <script>
    $(function(){
      $.getJSON("people.json", function(res) {
        var str = $("#testTemplate").html();
        var data = {people:res};
        var rendered = new EJS({text:str}).render(data);
        $("#resdiv").html(rendered);
      });
    });
  </script>
  
  <script id="testTemplate" type="text/x-ejs-template">
    <% for(var i=0;i<people.length; i++) { % >
      <%= people[i].name %>
    <%} %>
  </script>
</body>
  • helpers
<body>
<div id="resdiv"></div>
<script type="text/javascript">
  $(function(){
    var data = {name: "Ke", img:"Ke.jpg", homepage:"http://yidi.me"};
    var str = $("#testTemplate").html();
    var result = new EJS({text:str}).render(data);
    $("#resdiv").html(result);
  });
</script>

<script id="testTemplate" type="text/x-ejs-template">
  <h1>Hello <%= name %></h1>
  <%= link_to('Homepage', homepage) %><br/>
  <%= img_tag(img, "Picture") %>
</script>
</body>
  • condition
<body>
<div id="resdiv"></div>
<script type="text/javascript">
  $(function(){
    var data = {name: "Ke", img:"Ke.jpg", homepage:"http://yidi.me"};
    var str = $("#testTemplate").html();
    var result = new EJS({text:str}).render(data);
    $("#resdiv").html(result);
  });
</script>

<script id="testTemplate" type="text/x-ejs-template">
  <h1>Hello <%= name %></h1>
  <%= link_to('Homepage', homepage) %><br/>
  <% if(is_current_page('http://yidi.me')) { %>
    condition1
  <% } else { %>
    condition2
  <% } %>
</script>
</body>
  • self-defined function
<body>
<div id="resdiv"></div>
<script type="text/javascript">
  function short(s) {
    return s.subStr(0,10);
  }
  
  $(function(){
    var data = {name: "Ke", img:"Ke.jpg", homepage:"http://yidi.me"};
    var str = $("#testTemplate").html();
    var result = new EJS({text:str}).render(data);
    $("#resdiv").html(result);
  });
</script>

<script id="testTemplate" type="text/x-ejs-template">
  <h1>Hello <%= name %></h1>
  <%= link_to('Homepage', homepage) %><br/>
  <%= short(bio) %>
</script>
</body>

2.Handlebars

  • basic conditions
{{#each people}}
  {{#if people.firstName}}
    condition1
  {{/if}}
{{/each}}
  • put it together
<body>
<div id="resdiv"></div>
<script type="text/javascript">
  $(function(){
    var data = {name: "Ke", img:"Ke.jpg", homepage:"<i>secret</>"};
    var str = $("#testTemplate").html();
    var template = Handlebars.compile(str);
    var result = template(data);
    $("#resdiv").html(result);
  });
</script>

<script id="testTemplate" type="text/x-handlebars-template">
  <h1>Hello {{name}}</h1>
  You are {{age}} years old.
  {{{homepage}}}     //To parse html tag. use triple braces
</script>
</body>
  • Get data using jQuery's getJSON method
<body>
  <div id="resdiv"></div>
  <script>
    var str = $("#testTemplate").html();
    var template = Handlebars.complie(str);
    $(function(){
      $.getJSON("people.json", function(res) {
        var data = {people:res};
        var rendered = template(data);
        $("#resdiv").html(rendered);
      });
    });
  </script>
  
  <script id="testTemplate" type="text/x-ejs-template">
    {{#each people}}
      {{name}}
    {{/each}}
  </script>
</body>
  • single dimension JSON array
<body>
  <div id="resdiv"></div>
  <script>
    var str = $("#testTemplate").html();
    var template = Handlebars.complie(str);
    $(function(){
      $.getJSON("people.json", function(res) {
        var data = {people:res};
        var rendered = template(data);
        $("#resdiv").html(rendered);
      });
    });
  </script>
  
  <script id="testTemplate" type="text/x-ejs-template">
    {{#each people}}
      {{this}}
      {{!-- or --}}
      {{.}}
    {{/each}}
  </script>
</body>
  • get outer scope variable
<body>
<div id="resdiv"></div>
<script type="text/javascript">
  $(function(){
    var data = {name: "Ke", img:"Ke.jpg", homepage:"<i>secret</>",hobbies:['a','b','c']};
    var str = $("#testTemplate").html();
    var template = Handlebars.compile(str);
    var result = template(data);
    $("#resdiv").html(result);
  });
</script>

<script id="testTemplate" type="text/x-handlebars-template">
  {{name}}
    {{#each hobbies}}
      {{../name}} likes {{.}} {{!-- use outer scope's name--}}
    {{/each}}
</script>
</body>
  • boolean
<body>
<div id="resdiv"></div>
<script type="text/javascript">
  $(function(){
    var data = {name: "Ke", img:"Ke.jpg", homepage:"<i>secret</>",hobbies:['a','b','c'], isBoolean:true};
    var str = $("#testTemplate").html();
    var template = Handlebars.compile(str);
    var result = template(data);
    $("#resdiv").html(result);
  });
</script>

<script id="testTemplate" type="text/x-handlebars-template">
  {{name}}
  {{#if isboolean}}
    condition3
  {{else}}
    condition4
  {{/if}}
  
  {{#unless isboolean}}
    condition5
  {{/unless}}
    {{#each hobbies}}
      {{../name}} likes {{.}} {{!-- use outer scope's name--}}
    {{/each}}
</script>
</body>
  • with keyword
<body>
<div id="resdiv"></div>
<script type="text/javascript">
  $(function(){
    var data = {name: "Ke", img:"Ke.jpg", homepage:"<i>secret</>",stats:{key1:"value1",key2:"value2"};
    var str = $("#testTemplate").html();
    var template = Handlebars.compile(str);
    var result = template(data);
    $("#resdiv").html(result);
  });
</script>

<script id="testTemplate" type="text/x-handlebars-template">
  {{#with stats}}
    <table>
      <tr>
        <td>key1</td>
        <td>{{key1}}</td>
      </tr>
      <tr>
        <td>key2</td>
        <td>{{key2}}</td>
      </tr>
    </table>
  {{/with}}
</script>
</body>
  • index, first, last
<body>
<div id="resdiv"></div>
<script type="text/javascript">
  $(function(){
    var data = {name: "Ke", img:"Ke.jpg", homepage:"<i>secret</>",hobbies:['a','b','c'], isBoolean:true};
    var str = $("#testTemplate").html();
    var template = Handlebars.compile(str);
    var result = template(data);
    $("#resdiv").html(result);
  });
</script>

<script id="testTemplate" type="text/x-handlebars-template">
    {{#each hobbies}}
      {{if @first}}
        condition
      {{/if}}
      Index:{{@index}}
      Value:{{.}}
      {{if @last}}
        condition
      {{/if}}
    {{/each}}
</script>
</body>
  • helpers
<body>
<div id="resdiv"></div>
<script type="text/javascript">
  Handlebaars.registerHelper("ageHelper", function(text) {
    if(!text) return "unknown"; //if age field does not exist
    return text;
  });
  
  $(function(){
    var data = {name: "Ke", age:1};
    var str = $("#testTemplate").html();
    var template = Handlebars.compile(str);
    var result = template(data);
    $("#resdiv").html(result);
  });
</script>

<script id="testTemplate" type="text/x-handlebars-template">
  You are {{ ageHelper age}} years old.
</script>
</body>
  • little complex helper
<body>
<div id="resdiv"></div>
<script type="text/javascript">
  Handlebaars.registerHelper("ageHelper", function(text) {
    if(!text) return "unknown";
    var age = parseInt(text,10);
    if(age <= 0 || age > 150) return "unknown";
    return text;
  });
  
  $(function(){
    var data = {name: "Ke", age:1};
    var str = $("#testTemplate").html();
    var template = Handlebars.compile(str);
    var result = template(data);
    $("#resdiv").html(result);
  });
</script>

<script id="testTemplate" type="text/x-handlebars-template">
  You are {{ ageHelper age}} years old.
</script>
</body>
  • image helper
<body>
<div id="resdiv"></div>
<script type="text/javascript">
  Handlebaars.registerHelper("imageHelper", function(url) {
    return Handlebars.SafeString("<img src=\"" = url = "\">");   //parse HTML code
  });
  
  $(function(){
    var data = {name: "Ke", img:"http://a.jpg"};
    var str = $("#testTemplate").html();
    var template = Handlebars.compile(str);
    var result = template(data);
    $("#resdiv").html(result);
  });
</script>

<script id="testTemplate" type="text/x-handlebars-template">
  {{imageHelper img}}
</script>
</body>
  • multi param helper
<body>
<div id="resdiv"></div>
<script type="text/javascript">
  Handlebaars.registerHelper("gravatarurl", function(email, size, def, rating) {
    var str = 'http://...' + md5(email) + 'jpg?';
    if(size) str += '&s='+size;
    if(def) str += '&d' +encodeURI(def);
    if(rating) str += '&r' +rating;
    return str;
  });
  
  $(function(){
    var data = {name: "Ke", email:xxx@xxxx.com,};
    var str = $("#testTemplate").html();
    var template = Handlebars.compile(str);
    var result = template(data);
    $("#resdiv").html(result);
  });
</script>

<script id="testTemplate" type="text/x-handlebars-template">
  You are {{ gravatarurl email 100 'id'}} years old.
  {{!-- OR: gravatarurl email id=100 def='id'--}}
</script>
</body>
  • partials
<body>
<div id="resdiv"></div>
<script type="text/javascript">
  
  $(function(){
    var data = {name: "Ke", age:1
      stats:{
        "y":10,
        "n":5
      }
    };
    var str = $("#stats").html();
    Handlebars.registerPartial("stats",statTemplate);
    var str = $("#testTemplate").html();
    var template = Handlebars.compile(str);
    var result = template(data);
    $("#resdiv").html(result);
  });
</script>

<script id="testTemplate" type="text/x-handlebars-template">
  You are {{age}} years old.
  {{> stats}}
</script>

<script id="stats" type="x-handlebars-template"
  <table>
    <tr>
      <td>{{stat.y}}</td>
      <td>{{stat.x}}</td>
    </tr>
  <table>
</body>

###3.Dust

  • True False
{?isTrue}
xxx
{/isTrue}



{^isFalse}
xxx
{/isFalse}

{?elsetest}
yes
{:else}
no
{/elsetest}
  • put it together
<body>
<div id="resdiv"></div>
<script type="text/javascript">
  $(function(){
    var data = {name: "Ke"};
    var str = $("#testTemplate").html();
    var template = dust.compile(str,"strname");
    dust.loadSource(template);
    dust.render("strname",data,function(err,result){
      $("#resdiv").html(result);
    });
  });
</script>

<script id="testTemplate" type="text/x-dust-template">
  <h1>Hello {name}</h1>
</script>
</body>
  • section data
<body>
<div id="resdiv"></div>
<script type="text/javascript">
  
  $(function(){
    var data = {name: "Ke", age:1
      stats:{
        "y":10,
        "n":5
      }
    };
    var str = $("#testTemplate").html();
    var template = dust.compile(str,"strname");
    dust.loadSource(template);
    dust.render("strname",data,function(err,result){
      $("#resdiv").html(result);
    });
  });
</script>

<script id="testTemplate" type="text/x-handlebars-template">
  You are {age} years old.
  <h2>Stats</h2>
  {#stats}
  <table>
    <tr>
      <td>y</td>
      <td>{y}</td>
    </tr>
    <tr>
      <td>n</td>
      <td>{n}</td>
    </tr>
  <table>
  {/stats}
</script>
</body>
  • array dot syntax
<body>
<div id="resdiv"></div>
<script type="text/javascript">
  
  $(function(){
    var data = {name: "Ke", age:1
    hobbies:["books","swimming"]
    };
    var str = $("#testTemplate").html();
    var template = dust.compile(str,"strname");
    dust.loadSource(template);
    dust.render("strname",data,function(err,result){
      $("#resdiv").html(result);
    });
  });
</script>

<script id="testTemplate" type="text/x-handlebars-template">
  You are {age} years old.
  <h2>Stats</h2>
  <ul>
  {#hobbies}
    <li>{.}</li>
  {/hobbies}  
  </ul>
</script>
</body>
  • array of objects
<body>
<div id="resdiv"></div>
<script type="text/javascript">
  
  $(function(){
    var data = {name: "Ke", age:1
    hobbies:[{name:"books",level:"novice"},{name:"swimming",level:"pro"}]
    };
    var str = $("#testTemplate").html();
    var template = dust.compile(str,"strname");
    dust.loadSource(template);
    dust.render("strname",data,function(err,result){
      $("#resdiv").html(result);
    });
  });
</script>

<script id="testTemplate" type="text/x-handlebars-template">
  You are {age} years old.
  <h2>Stats</h2>
  <ul>
  {#hobbies}
    <li>{name}{level}</li>
  {/hobbies}  
  </ul>
</script>
</body>
  • filter
<body>
<div id="resdiv"></div>
<script type="text/javascript">
  $(function(){
    var data = {name: "<strong>Ke</strong>"};
    var str = $("#testTemplate").html();
    var template = dust.compile(str,"strname");
    dust.loadSource(template);
    dust.render("strname",data,function(err,result){
      $("#resdiv").html(result);
    });
  });
</script>

<script id="testTemplate" type="text/x-dust-template">
  <h1>Hello {name|h}</h1>
</script>
</body>
  • custom filter
<body>
<div id="resdiv"></div>
<script type="text/javascript">

dust.filter.titlecase = function(){
  return str.replace(/\w\S*/g, function(txt){return
  txt.chatAt(0).toUpperCase() + txt.substr(1).toLowerCase();});};
  
  $(function(){
    var data = {name: "book is mine"};
    var str = $("#testTemplate").html();
    var template = dust.compile(str,"strname");
    dust.loadSource(template);
    dust.render("strname",data,function(err,result){
      $("#resdiv").html(result);
    });
  });
</script>

<script id="testTemplate" type="text/x-dust-template">
  <h1>Hello {name}</h1>
</script>
</body>
  • context helper
<body>
<div id="resdiv"></div>
<script type="text/javascript">

  
  $(function(){
    var data = {name: "book is mine",age:40,high:function(){
    return this.age>10;}};
    var str = $("#testTemplate").html();
    var template = dust.compile(str,"strname");
    dust.loadSource(template);
    dust.render("strname",data,function(err,result){
      $("#resdiv").html(result);
    });
  });
</script>

<script id="testTemplate" type="text/x-dust-template">
  <h1>Hello {name}</h1>
  {#high}
    content....
  {/high}
</script>
</body>
  • two level context
<body>
<div id="resdiv"></div>
<script type="text/javascript">

  
  $(function(){
    var data = {name: "book is mine",age:40,
    high:function(){
      return this.age>10;
    }
    describe: function(chunk,context, bodies,params){
    if(this.age<10) return true //simplest case
    if(this.age<10){
    return chunk.render(bodies.subOne, context);  //{:subOne} will show if this is true
    
    };
    var str = $("#testTemplate").html();
    var template = dust.compile(str,"strname");
    dust.loadSource(template);
    dust.render("strname",data,function(err,result){
      $("#resdiv").html(result);
    });
  });
</script>

<script id="testTemplate" type="text/x-dust-template">
  <h1>Hello {name}</h1>
  {#describe}
    {:subOne}
      xxxxx
    {:subTwo}
      xxxx
  {/describe}
</script>
</body>
  • custom helper exapmle 1
<body>
<div id="resdiv"></div>
<script type="text/javascript">
  
  $(function(){
    var data = {name: "Ke", age:1
    hobbies:["books","swimming"]
    };
    var str = $("#testTemplate").html();
    var template = dust.compile(str,"strname");
    dust.loadSource(template);
    dust.render("strname",data,function(err,result){
      $("#resdiv").html(result);
    });
  });
</script>

<script id="testTemplate" type="text/x-handlebars-template">
  You are {age} years old.

  {@gt key="age" value="40"}
    content
  {/gt}  
  //show period after last item.
  My hobbies are {#hobbies}{.}{@sep},{/sep}{/hobbies}
</script>
</body>
  • custom helper exapmle 2
<body>
<div id="resdiv"></div>
<script type="text/javascript">
  dust.helpers.comment = function(chunk, context, bodies, params){
    chunk.write("<!--");
    chunk.render(bodies.block, context);
    chunk.write("-->");
    return chunk;
  }
  
  $(function(){
    var data = {name: "Ke", age:1
    hobbies:["books","swimming"]
    };
    var str = $("#testTemplate").html();
    var template = dust.compile(str,"strname");
    dust.loadSource(template);
    dust.render("strname",data,function(err,result){
      $("#resdiv").html(result);
    });
  });
</script>

<script id="testTemplate" type="text/x-handlebars-template">
  You are {age} years old.
  
  {@gt key="age" value="40"}
    content
  {/gt}  
  //show period after last item.
  {@comment}
  My hobbies are {#hobbies}{.}{@sep},{/sep}{/hobbies}
  {/comment}
</script>
</body>
  • partials(similar to section data)
<body>
<div id="resdiv"></div>
<script type="text/javascript">
  
  $(function(){
    var data = {name: "Ke", age:1
      stats:{
        "y":10,
        "n":5
      }
    };
    var str = $("#testTemplate").html();
    var template = dust.compile(str,"strname");
    dust.loadSource(template);
    /////
    var newstr = $("#newTemplate").html();
    var newtemplate = dust.compile(newstr,"newstrname");
    dust.loadSource(newtemplate);
    /////
    dust.render("newstrname",data,function(err,result){
      $("#resdiv").html(result);
    });
  });
</script>

<script id="testTemplate" type="text/x-handlebars-template">
  You are {age} years old.
  <h2>Stats</h2>
  {#stats}
  <table>
    <tr>
      <td>y</td>
      <td>{y}</td>
    </tr>
    <tr>
      <td>n</td>
      <td>{n}</td>
    </tr>
  <table>
  {/stats}
</script>

<script id="newTemplate" type="text/x-handlebars-template">
  {>stats/}
</script>
</body>
  • partials + if else
<body>
<div id="resdiv"></div>
<script type="text/javascript">
  
  $(function(){
    var data = {name: "Ke", age:1
      stats:{
        "y":10,
        "n":5
      }
    };
    var str = $("#testTemplate").html();
    var template = dust.compile(str,"strname");
    dust.loadSource(template);
    /////
    var newstr = $("#newTemplate").html();
    var newtemplate = dust.compile(newstr,"newstrname");
    dust.loadSource(newtemplate);
    /////
    dust.render("newstrname",data,function(err,result){
      $("#resdiv").html(result);
    });
  });
</script>

<script id="testTemplate" type="text/x-handlebars-template">
  You are {age} years old.
  <h2>Stats</h2>
  {^noTable}
  {#stats}
  <table>
    <tr>
      <td>y</td>
      <td>{y}</td>
    </tr>
    <tr>
      <td>n</td>
      <td>{n}</td>
    </tr>
  <table>
  {/stats}
  {:else}
  {#stats}
  content
  {/stats}
  {/noTable}
</script>

<script id="newTemplate" type="text/x-handlebars-template">
  {>stats noTable="true"/}
</script>
</body>
  • precompilation npm install -g dust-linkedin

dustc *.dust -o template.js

For example:

xxx.dust->template.js

<script id="testTemplate" type="text/x-handlebars-template">
  You are {{ ageHelper age}} years old.
</script>

main file:

<head>
<script src="template.js"></script>
<script type="text/javascript">
  
  $(function(){
    var data = {name: "Ke", age:1
      stats:{
        "y":10,
        "n":5
      }
    };
    dust.render("newstrname",data,function(err,result){
      $("#resdiv").html(result);
    });
  });
</script>
</head>

Note all compile-related code was deleted. like:

    var str = $("#testTemplate").html();
    var template = dust.compile(str,"strname");
    dust.loadSource(template);

orjstemplate's People

Contributors

rengokantai avatar

Watchers

James Cloos avatar avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.