zyzbroker/handlebardart

A handlebar.js wrapper for the dart web development

A handlebar.js wrapper in DART

This is an handlebars.js wrapper for the DART developer. Sometime you might need to inject HTML template into the slot of the your web layout without using angular framework. The handlebars.js is a pretty neat template engine, fast, efficient and easy-syntax. There is just no reason not to use it.

How to use it in DART

here is the template

    String html = '''
    {{#each blogs}}
      <div class="entry">
        <h1>{{title}}</h1>
        <div class="body">
          {{body}}
        </div>
      </div>
    {{/each}}
  ''';

here is the context data contract

class Context{
  List<Blog> blogs;
  Context(this.blogs);
}

class Blog {
  String title;
  String body;
  Blog(this.title, this.body);
}

here is how handlebars is used to compile the template

    import 'dart:html';
    import 'package:handlebars.js/handlebars.dart' as Handlebars;

    List<Blog> blogs = <Blog>[
        Blog('Science','Science Blogs'),
        Blog('Technology', 'Technology Blogs'),
        Blog('Engineering', 'Engineering Blogs'),
        Blog('Art','Art Blogs'),
        Blog('Maths', 'Maths Blog'),
    ];

    final container = document.querySelector('.container');
    final String content = Handlebars.compile(html)(Context(blogs));
    container.innerHtml = content;

Note that you have to create context contract to be able to pass blogs to the html template. You don't need to do that. you can pass in Map literal object but you have to use package js to wrap around the map literal object as shown below

    //you have to import this library
    import 'dart:js_util' as js;
    ...
    final String content = Handlebars.compile(html)(js.jsify({
        'blogs': blogs
    }));
    ...    

Here is the result on the web page

handlebardart's Issues

Question - Could you use this to update the header meta tags

Wounder if it would be possible to update the header meta tags?

JS Interop issue in handlebars2.dart in gitlab pipeline

Hi,

Could you please help me with this issue:
I am using handlebars2 dependency in my angular dart project. It was working fine for long time. Recently when I had to push the code to gitlab I get the following error during build phase and pipeline fails:

Current version of handlebars being used in pubspec.yaml file is:
handlebars2: ^0.0.3

dart:js import error

My first dart project so maybe I'm doing something wrong but totally stuck on this. Trying to write a basic shelf HTTP server (not flutter or anything like that) and when I import handlebars2 I'm getting this error:

../../../.pub-cache/hosted/pub.dev/js-0.6.7/lib/js.dart:10:1: Error: Dart library 'dart:js' is not available on this platform.

Several proposed solutions here and I've tried all that I understand (that don't involve directly editing cached files...) and nothing works.

Any pointers or fixes?