Last active
January 10, 2018 01:25
-
-
Save jonasalbert/4c303448b8a9db629f7bc232b4dcc449 to your computer and use it in GitHub Desktop.
Sample Dust dot js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<title></title> | |
<script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script> | |
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.8/require.min.js"></script> | |
<script type="text/javascript" src="dust-core-2.0.3.js"></script> | |
<script type="text/javascript" src="templates/compiled/todos.js"></script> | |
</head> | |
<body> | |
<div id="content"> | |
</div> | |
<script type="text/javascript"> | |
/* <![CDATA[ */ | |
var data = | |
{ | |
listname: 'Welcome to dust', | |
fullname: 'John Doe', | |
todos: [ | |
{ | |
action: 'learn some dust!', | |
duedate: 'now!', | |
orders: [ | |
{ orderid: 1, qty: 2, item: 'Item A' }, | |
{ orderid: 2, qty: 1, item: 'Item B' }, | |
{ orderid: 3, qty: 1, item: 'Item A' }, | |
{ orderid: 4, qty: 4, item: 'Item C' } | |
] | |
}, | |
{ | |
action: 'visit the south bay', | |
duedate: 'tomorrow...', | |
orders: [ | |
{ orderid: 1, qty: 2, item: 'Item A' }, | |
{ orderid: 2, qty: 1, item: 'Item B' }, | |
{ orderid: 3, qty: 1, item: 'Item A' }, | |
{ orderid: 4, qty: 4, item: 'Item C' } | |
] | |
} | |
] | |
} | |
dust.render("todos", data, function(err, out) { | |
debugger; | |
$('#content').html(out); | |
}); | |
/* ]]> */</script> | |
</body> | |
</html> | |
----------------------------------------------------------------------------------------- | |
(function() { | |
dust.register('todos', header); | |
function header(chk, ctx) { | |
return chk | |
//.write('<h1>') | |
.reference(ctx.get('listname'), ctx, 'h') | |
.write('<br>') | |
.reference(ctx.get('fullname'), ctx, 'h') | |
//.write('</h1><ul>') | |
.section(ctx.get('todos'), ctx, { 'block': details }, null) | |
.write('</ul>') | |
//.section(ctx.get('todos'), ctx, { 'block': body_1 }, null) | |
; | |
} | |
function details(chk, ctx) { | |
return chk | |
.write('<li>') | |
.reference(ctx.get('action'), ctx, 'h') | |
.write(' - ') | |
.reference(ctx.get('duedate'), ctx, 'h') | |
.section(ctx.get('orders'), ctx, { 'block': orders }, null) | |
.write('</li>\n'); | |
} | |
function orders(chk, ctx) { | |
return chk | |
.write('<li>') | |
.reference(ctx.get('orderid'), ctx, 'h') | |
.write(' - ') | |
.reference(ctx.get('qty'), ctx, 'h') | |
.write(' - ') | |
.reference(ctx.get('item'), ctx, 'h') | |
.write('</li>\n'); | |
} | |
function ulClose() { | |
return '</ul>' | |
} | |
return header; | |
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
https://github.com/ericktai/dust-js-browser | |
dust-js-browser | |
A sample of using DustJS in the browser. (non-NodeJS example) | |
View the example at http://ericktai.github.io/dust-js-browser/ | |
I created this repo as a reference point on using the DustJS templating library without NodeJS. The Dust and LinkedIn tutorials didn't really quite describe how to get things running in a regular HTML/JS/Browser app, so this was an exercise in doing so. | |
Getting Started | |
The pre-compiled JS is ready to go - just open index.html in the browser and find the template at src/dusts/todos.dust to see how DustJS works. | |
Making changes? Run node duster.js in your root folder on the command line first. It watches and compiles your templates to JS as needed. You'll need duster.js. See duster.js for more info. | |
How It Works | |
DustJS templates should be saved to src/dusts as *.dust files. DustJS templates are compiled into *.js files - use duster.js to auto compile your templates to templates/compiled/*.js. I've configured the source and compiled paths via my duster.json file. | |
You can use your template in index.html. In this example, my template is todos.dust, and it was compiled into todos.js. Let's include the template in the page. | |
<script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script> | |
<script type="text/javascript" src="dust-core-2.0.3.js"></script> | |
<script type="text/javascript" src="templates/compiled/todos.js"></script> | |
As my example dust template is todos.js, dust will give it a name of todos. The following binds a given JSON (details not shown) to the todos template. | |
dust.render("todos", { | |
//This 2nd parameter is the JSON data you want to bind with the template | |
}, function(err, out) { | |
//when done binding the template, the HTML will be represented by the "out" variable | |
}); | |
The template runs against JSON that you pass in. Here's my JSON data with two todo objects: | |
{ | |
listname: 'My Todos', | |
todos: [ | |
{ | |
action: 'learn some dust!', | |
duedate: 'today' | |
}, | |
{ | |
action: 'visit the south bay', | |
duedate: 'tomorrow' | |
} | |
] | |
} | |
Combined: | |
dust.render("todos", { | |
listname: 'My Todos', | |
todos: [ | |
{ | |
action: 'learn some dust!', | |
duedate: 'today' | |
}, | |
{ | |
action: 'visit the south bay', | |
duedate: 'tomorrow' | |
} | |
] | |
}, function(err, out) { | |
//when done binding the template, the HTML will be represented by the "out" variable | |
}); | |
Finally, the output is handled by the function in the 3rd parameter: dust.render(..., ..., function(err, out) {}). out represents the processed HTML result. To set that to a div, simply use something like jQuery to do so: | |
dust.render("todos", { | |
//JSON data... | |
}, function(err, out) { | |
$('#content').html(out); | |
}); | |
Here's the *.dust template so you can see how the JSON binds to it: | |
<h1>{listname}</h1> | |
<ul> | |
{#todos} | |
<li>{action} - {duedate}</li>{~n} | |
{/todos} | |
</ul> | |
And the resulting HTML: | |
<h1>My Todos</h1> | |
<ul> | |
<li>learn some dust! - today</li> | |
<li>visit the south bay - tomorrow</li> | |
</ul> | |
More Information | |
Read more about DustJS at the LinkedIn Dust Tutorial: https://github.com/linkedin/dustjs/wiki/Dust-Tutorial |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment