handlebars 0.2.0

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 40

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.

Changelog

0.2.0

  • Drop js_util dependency and use dart:js_util instead.

0.1.0

  • Initial version.

example/handlebars.dart

// Copyright (c) 2016, Fluidic Inc. All rights reserved. Use of this source code
// is governed by a BSD-style license that can be found in the LICENSE file.

@JS()
library example.handlebars;

import 'dart:js_util';
import 'dart:html';

import 'package:handlebars/handlebars.dart';
import 'package:js/js.dart';

@JS()
@anonymous
class Person {
  external String get firstName;
  external String get lastName;

  external factory Person({String firstName, String lastName});
}

@JS()
@anonymous
class Post {
  external Person get author;
  external String get body;
  external List<Comment> get comments;

  external factory Post({Person author, String body, List<Comment> comments});
}

@JS()
@anonymous
class Comment {
  external Person get author;
  external String get body;

  external factory Comment({Person author, String body});
}

@JS()
@anonymous
class Items {
  external List<Item> get items;

  external factory Items({List<Item> items});
}

@JS()
@anonymous
class Item {
  external String get name;
  external String get emotion;

  external factory Item({String name, String emotion});
}

String list(items, Options options) {
  final className = getProperty(options.hash, 'class');
  final buffer = new StringBuffer();
  buffer.writeln('<ul class="${className}">');

  for (final item in items) {
    buffer.writeln('<li>${options.fn(item)}</li>');
  }

  buffer.writeln('</ul>');
  return buffer.toString();
}

String myIf(context, conditional, Options options) {
  if (conditional) {
    return options.fn(context);
  } else {
    return options.inverse(context);
  }
}

void renderPeople() {
  final template = '''
{{#list people class="people"}}
  {{#my-if isActive}}
    {{firstName}} {{lastName}}
  {{else}}
    <strike>{{firstName}} {{lastName}}</strike>
  {{/my-if}}
{{/list}}
''';

  handlebars.registerHelper('list', allowInterop(list));
  handlebars.registerHelper('my-if', allowInteropCaptureThis(myIf));

  final context = jsify({
    'people': [
      {'firstName': 'Yehuda', 'lastName': 'Katz', 'isActive': false},
      {'firstName': 'Carl', 'lastName': 'Lerche', 'isActive': true},
      {'firstName': 'Alan', 'lastName': 'Johnson', 'isActive': true}
    ]
  });

  final text = handlebars.compile(template)(context);
  document.querySelector('#container_people').innerHtml = text;
}

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;
}

SafeString agreeButton(Item item, Options options) {
  final emotion = handlebars.escapeExpression(item.emotion);
  final name = handlebars.escapeExpression(item.name);

  return new SafeString('<button>I agree. I ${emotion} ${name}</button>');
}

void renderItems() {
  final template = '''
<ul>
  {{#each items}}
  <li>{{agree_button}}</li>
  {{/each}}
</ul>
''';

  handlebars.registerHelper(
      'agree_button', allowInteropCaptureThis(agreeButton));

  final context = new Items(items: [
    new Item(name: 'Handlebars', emotion: 'love'),
    new Item(name: 'Mustache', emotion: 'enjoy'),
    new Item(name: 'Ember', emotion: 'want to learn')
  ]);
  final text = handlebars.compile(template)(context);
  document.querySelector('#container_items').innerHtml = text;
}

void main() {
  renderPeople();
  renderPost();
  renderItems();
}

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  handlebars: "^0.2.0"

2. Install it

You can install packages from the command line:

with pub:


$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:handlebars/handlebars.dart';
        
Version Uploaded Documentation Archive
0.2.0 Oct 1, 2016 Go to the documentation of handlebars 0.2.0 Download handlebars 0.2.0 archive
0.1.0 Aug 3, 2016 Go to the documentation of handlebars 0.1.0 Download handlebars 0.1.0 archive

Analysis

We analyzed this package on Apr 9, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0-dev.46.0
  • pana: 0.10.6

Scores

Popularity:
Describes how popular the package is relative to other packages. [more]
0 / 100
Health:
Code health derived from static analysis. [more]
100 / 100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
48 / 100
Overall score:
Weighted score of the above. [more]
40
Learn more about scoring.

Platforms

Detected platforms: web, other

Primary library: package:handlebars/handlebars.dart with components: js.

Suggestions

  • The description is too short.

    Add more detail about the package, what it does and what is its target use case. Try to write at least 60 characters.

  • Package is pre-v1 release.

    While there is nothing inherently wrong with versions of 0.*.*, it usually means that the author is still experimenting with the general direction API.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.0.0 <2.0.0
js >=0.6.0 <0.7.0 0.6.1
Dev dependencies
browser ^0.10.0+2
test >=0.12.0 <0.13.0