Skip to content

Instantly share code, notes, and snippets.

@odayibasi

odayibasi/HandlebarAndMustacheJS.html

Last active April 12, 2020 14:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save odayibasi/ca64cdeb5c1312f3892b55e7fcce4389 to your computer and use it in GitHub Desktop.
Save odayibasi/ca64cdeb5c1312f3892b55e7fcce4389 to your computer and use it in GitHub Desktop.
Download ZIP
DOM API Usage History With JS Frameworks/Library
Raw
HandlebarAndMustacheJS.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.1.0/mustache.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.js"></script>
<script id="user-script" type="template/text">
{{#userArr}}
<div class='user'>
<span class='user-name'>{{name}}</span>
<span class='user-age'>{{age}}</span>
{{#childCondition}}
{{#childInfo}}
<span class='user-child-count'>{{count}}</span>
{{#children}}
<div class='children'>
<span class='children-name'>{{name}}</span>
</div>
{{/children}}
{{/childInfo}}
{{/childCondition}}
</div>
{{/userArr}}
</script>
<script>
$(function () {
const appModel = {};
appModel.userArr = [
{ name: 'Onur', age: '39', childCondition: function () { return this.childInfo.children.length > 0 }, childInfo: { count: function () { return this.children.length }, children: [{ name: 'Ozgur' }, { name: 'Deniz' }] } },
{ name: 'Ugur', age: '36', childCondition: function () { return this.childInfo.children.length > 0 }, childInfo: { count: function () { return this.children.length }, children: [{ name: 'Ela' }, { name: 'Kaan' }, { name: 'Lena' }] } },
{ name: 'Ali', age: '22', childCondition: function () { return this.childInfo.children.length > 0 }, childInfo: { count: function () { return this.children.length }, children: [] } }]
//Template
const theTemplate = $("#user-script").html();
// //Mustache-TemplateRendering
const theMustacheView = Mustache.to_html(theTemplate, appModel);
$("#userContainer").html(theMustacheView);
//Handlebar-TemplateRendering
const template = Handlebars.compile(theTemplate);
const theHandleBarView = template(appModel)
$("#userContainer").html(theHandleBarView);
});
</script>
</head>
<body>
<div>
<div id='userContainer'>
</div>
</div>
</body>
</html>
Raw
HandlebarDOMAPIUsage.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.js"></script>
<script>
$(function () {
//Handlebar-TemplateRendering
Handlebars.registerHelper('upperCase', (string) => string.toUpperCase());
Handlebars.registerHelper('lowerCase', (string) => string.toLowerCase());
const obj = { person: { firstname: "Onur", lastname: "Dayibasi" } }
const templateObj = Handlebars.compile(`
{{#with person}}
{{upperCase firstname}} {{lowerCase lastname}}
{{/with}}`);
$("#userContainer").append(templateObj(obj));
const arr = { persons: ["Onur", "Ugur", "Ozgur"] };
const templateArr = Handlebars.compile(`
<div>
{{#each persons}}
{{upperCase this}}
{{/each}}
</div>
`);
$("#userContainer").append(templateArr(arr));
Handlebars.registerHelper("list", function (items, options) {
const itemsAsHtml = items.map(item => "<li>" + options.fn(item) + "</li>");
return "<ul>\n" + itemsAsHtml.join("\n") + "\n</ul>";
});
const templateCustom=Handlebars.compile(`{{#list persons}}{{this}}{{/list}}`);
$("#userContainer").append(templateCustom(arr));
});
</script>
</head>
<body>
<div>
<div id='userContainer'>
</div>
</div>
</body>
</html>
Raw
JQueryDOMAPIUse.html
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
$(function() {
let counter=0;
$( "#btnCounter" ).click(function() {
counter++;
let DOMAsStr='';
for(let i=0;i<counter;i++){
DOMAsStr+=`<div>Selam</div>`
}
$("#counter").text(counter);
$("#selamContainer").html(DOMAsStr);
});
});
</script>
</head>
<body>
<div>
<div>
<button id='btnCounter'>Counter</button>
<span id=counter></span>
</div>
<div id='selamContainer'>
</div>
</div>
</body>
</html>
Raw
JSDOMAPIUse.html
<html>
<head>
<script>
let counter=0;
function handleClick(e){
counter++;
let DOMAsStr='';
for(let i=0;i<counter;i++){
DOMAsStr+=`<div>Selam</div>`
}
document.getElementById("counter").innerHTML=`${counter}`;
document.getElementById("selamContainer").innerHTML=DOMAsStr;
}
</script>
</head>
<body>
<div>
<div>
<button onClick='handleClick()'>Counter</button>
<span id=counter></span>
</div>
<div id='selamContainer'>
</div>
</div>
</body>
</html>
Raw
MustacheJSUsage4NestedObjectsDOMAPIUse.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.1.0/mustache.js"></script>
<script id="user-script" type="template/text">
{{#userArr}}
<div class='user'>
<span class='user-name'>{{name}}</span>
<span class='user-age'>{{age}}</span>
{{#childCondition}}
{{#childInfo}}
<span class='user-child-count'>{{count}}</span>
{{#children}}
<div class='children'>
{{>child}}
</div>
{{/children}}
{{/childInfo}}
{{/childCondition}}
</div>
{{/userArr}}
</script>
<script>
$(function () {
const appModel = {};
appModel.userArr = [
{ name: 'Onur', age: '39', childCondition:function(){return this.childInfo.children.length>0} ,childInfo:{count:function(){return this.children.length}, children: [{ name: 'Ozgur' }, { name: 'Deniz' }] }},
{ name: 'Ugur', age: '36', childCondition:function(){return this.childInfo.children.length>0} ,childInfo:{count:function(){return this.children.length}, children: [{ name: 'Ela' }, { name: 'Kaan' }, { name: 'Lena' }]}},
{ name: 'Ali', age: '22', childCondition:function(){return this.childInfo.children.length>0} ,childInfo:{count:function(){return this.children.length}, children: [] }}]
const childTemplate = {child: "<span class='children-name'>{{name}}</span>"};
const theTemplate = $("#user-script").html();
var theHtml = Mustache.to_html(theTemplate, appModel,childTemplate);
$("#userContainer").html(theHtml);
});
</script>
</head>
<body>
<div>
<div id='userContainer'>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment