handlebars 0.2.0
handlebars: ^0.2.0 copied to clipboard
A wrapper for the Handlebars.js library.
handlebars #
A wrapper for the Handlebars.js library.
Usage #
Include the native JavaScript handlebars
library provided with this
package in index.html
.
<html>
<head>
<script src="packages/handlebars/dist/handlebars-v4.0.5.js"></script>
<script async type="application/dart" src="your_app_name.dart"></script>
<script async src="packages/browser/dart.js"></script>
</head>
<body>
</body>
</html>
Initialize partials and helpers and compile your template with
handlebars.compile
.
void renderPost() {
final template = '''
<div class="post">
{{> userMessage tagName="h1" }}
<h1>Comments</h1>
{{#each comments}}
{{> userMessage tagName="h2" }}
{{/each}}
</div>
''';
handlebars.registerPartial(
'userMessage',
'<{{tagName}}>By {{author.firstName}} {{author.lastName}}</{{tagName}}>' +
'<div class="body">{{body}}</div>');
final context = new Post(
author: new Person(firstName: 'Alan', lastName: 'Johnson'),
body: 'I Love Handlebars',
comments: [
new Comment(
author: new Person(firstName: 'Yehuda', lastName: 'Katz'),
body: 'Me too!')
]);
final text = handlebars.compile(template)(context);
document.querySelector('#container_post').innerHtml = text;
}
See the example directory for other examples.