Difference between revisions of "Handlebars"

From rbachwiki
Jump to navigation Jump to search
(Created page with "=Handlebars= ''' Load the handlebar.js from handlebarjs.com''' ==HTML CODE == <pre> <body> <script id="content" type="text/x-hanglebars-template"> <li>{{name}}</l...")
 
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
=Handlebars=
==[[example1| Source Code 1]]==
''' Load the handlebar.js from handlebarjs.com'''
==[[handlebarsHelpers| Handlebars Helpers]]==
 
==[[blockhelp | Block Helpers]]==
==HTML CODE ==
<pre>
<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>
</pre>
 
==Javascript Code==
 
<pre>
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 a Sliding or Rolling Barndoor, these kits come with all o"
        },
 
        {
            id: 2,
            image: "003.jpg",
            headline: "The BrownStone",
            textcontent: "Easily install a classic barndoor with Architectural Products by Outwater's Barndoor Hardware Kits. Available "
        }, {
            id: 3,
            image: "004.jpg",
            headline: "The loft",
            textcontent: "the hardware needed for a trouble-free installation and are availabl"
        }, {
            id: 4,
            image: "005.jpg",
            headline: "The Townhouse",
            textcontent: "an assortment of finishes such as, Matte Black, Espresso, and 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);
</pre>

Latest revision as of 21:17, 17 January 2017

Source Code 1

Handlebars Helpers

Block Helpers

Retrieved from "https://www.r512.com/index.php?title=Handlebars&oldid=759"