Difference between revisions of "Handlebars"

From rbachwiki
Jump to navigation Jump to search
Line 77: Line 77:
  $('#loop').append(compiledhtml);
  $('#loop').append(compiledhtml);
</pre>
</pre>
==[[#top|Back To Top]]-[[Main_Page| Home]] - [[Java Script|Category]]==

Revision as of 23:14, 16 January 2017

Load the handlebar.js from handlebarjs.com

HTML CODE

<body>
    <script id="content" type="text/x-hanglebars-template">
        <li>{{name}}</li>
        <li>{{date}}</li>
        <p>{{comment}}</p>
    </script>
    <div id="licontent">
        <ul> </ul>

    </div>
    <div id="loop">


    </div>

    <script id="lcontent" type="text/x-hanglebars-template">
        {{#each theImages}}
        <h3>{{this.headline}}</h3>
        <p> <img src="images/{{this.image}}" alt="{{this.id}}" /> </p>
        <p>{{this.textcontent}}</p>
        {{/each}}

    </script>
    <script src="usinghandle.js"></script>
</body>

Javascript Code

 var data = {
     name: "Robert",
     date: "totay",
     comment: "This is a comment"
 };

 var content = {
     theImages: [{
             id: 1,
             image: "002.jpg",
             headline: "Classic Strap (Single Wood Door Kit)",
             textcontent: "as either me with all o"
         },

         {
             id: 2,
             image: "003.jpg",
             headline: "The BrownStone",
             textcontent: "Easily install  Available "
         }, {
             id: 3,
             image: "004.jpg",
             headline: "The loft",
             textcontent: "the hardware nare availabl"
         }, {
             id: 4,
             image: "005.jpg",
             headline: "The Townhouse",
             textcontent: "an a Stainless "
         }

     ]
 };

 var source = $("#content").html();
 var template = Handlebars.compile(source);
 $('ul').append(template(data));

 var lsource = $("#lcontent").html();
 var ltemplate = Handlebars.compile(lsource);
 var compiledhtml = ltemplate(content);
 $('#loop').append(compiledhtml);

Back To Top- Home - Category