Skillwise Dust JS Template

How to Dust…?
• Dust is a JavaScript templating engine
designed to provide a clean seperation
between presentation and logic without
sacrificing the ease of use.
• A pure javascript libraries, Dust runs in both
browser-side and server-side environments.

What is Dust…?
• Dust is a templating language.
• Its gonna go logic less.

• JS Templating
App Development,
Simplified

What is an App…?
• Not just mobile
• Web
• Mobile
• Desktop

Goal of App Development…?
• Presentation
• Meats
• Content

Why JavaScript Templating…?
• Faster
• Cheaper
• Easier

Leading Template Engines…?
• Logic-Less Templates
• Jade(Node template Engine)
• Hogan.js
• EJS
<%Emdedded js%>

There are atleast a Dozen more…

Differences…?
• Logic
• Syntax
• Helpers

Reason#1
• Easy to use
• Well documented
• Clear Syntax
• Rich Features

<div class=“control-group”>
<label class=“control-label”> RDI office:</label>
<div class=“controls”>
<select name=“” class=“select-2”>
{#offices}
<option value=“{office code}”>
{office notation}</option>
{offices}
</select></div></div>

Reason#2
• LinkedIn
• Paypal
• Actively Developed
• Battle Tested
• Community Support

<form-class=“form-horizontal”>
<legend> job listening request</legend>
<fieldset>
<div class=“row”>
<div class=“span7”>
{>office/}
{>priority/}
{>notes/}
</div></div></fieldset></form>

Blocks…?
• 1. Define blocks
<div class=“page”>
<h1>{+pageHeader} our Awesome App
{/pageHeader}</h1>
<div class=“body content”>
<+body content/}
</div>
</div>

2.Add Content
{>”base-template”/}
{<body content}
<p> All About RDI </p>
<ul>
<li>abc</li>
<li>xyz</li>
</ul>
{/body content}

Many ways to keep your app lean &
clean

Reason#4
• Data Referencing
• Bottom up
• All your JSON
• Sets Dust Apart
• Doctivity.io Tried out
• Handle Bars.js
• Dust.js

The problem is:
• Nested data references

• What is your partial needs access to data
• Outside the loop…?

{
team:{id:1234, name:”team demo”},
Items:[
{id:678, name:”marry.jpg”,
thumbnail=“assets/678/x90.png”}
{id:679, name:”john.jpg”,
thumbnail:”assets/679/x90.png}
]
}

• {@eq}
key equals
{@key= role value=“bm”}
<a href=“#job-request” class=“btn btn-danger”>
</div>
{/eq}

<span class=“jobs count”>
{@size key=items}
{/size} Total jobs </span>
Several more helpers
(or)
Write your own!

How it works…?
1.Dust for mark up 2.JSON for data
-t =“Hello{name}! Json= {
You have {count} new “name”: “james”,
Messages from “count”:2,
{#people} “people” : [{“name”: “jim”
{name}, “distance” : “2”
{/people} },
{“name”: “eran”,
“distance”: “1”}]
}

3. java script for render
Dust.render(-t.json, function(error,data)
{
$(“mydiv”).html(data);
}
4. HTML
Hello james. You have 2 new messages
From jim,eran

Skillwise Dust JS Template

More Related Content

What's hot

More from Skillwise Group

Recently uploaded

Skillwise Dust JS Template