https://github.com/mateusmaso/handlebars.element

Handlebars plugin for declaring custom elements and attributes
https://github.com/mateusmaso/handlebars.element

custom-elements handlebars javascript

Last synced: 23 days ago
JSON representation

Handlebars plugin for declaring custom elements and attributes

• Host: GitHub
• URL: https://github.com/mateusmaso/handlebars.element
• Owner: mateusmaso
• License: mit
• Created: 2013-12-12T07:30:43.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2018-02-04T20:51:53.000Z (almost 7 years ago)
• Last Synced: 2024-04-14T12:35:51.725Z (7 months ago)
• Topics: custom-elements, handlebars, javascript
• Language: JavaScript
• Homepage:
• Size: 138 KB
• Stars: 6
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
handlebars.element [![Build Status](https://travis-ci.org/mateusmaso/handlebars.element.svg?branch=master)](https://travis-ci.org/mateusmaso/handlebars.element)

==================

This is a Handlebars plugin which allows using a similar W3C syntax for declaring custom elements and attributes inside templates.

## Install

```

$ npm install --save handlebars.element

```

## Usage

```javascript

var Handlebars = require("handlebars");

require("handlebars.element").default(Handlebars);

var main = document.querySelector("main");

var context = {};

var template = Handlebars.templates["path/to/template"];

var nodes = Handlebars.parseHTML(template(context));

nodes.forEach((node) => main.appendChild(node));

```

## Examples

### Declaring custom elements and attributes

```html



  
Now you can write custom elements and attributes with Handlebars!

  

  

  

  



```


### Registering a custom element

```javascript

Handlebars.registerElement("foo", function(attributes) {

  var div = document.createElement("div");

  div.innerText = "Hello World " + (attributes.title ? attributes.title : "guest");

  if (attributes.red) {

    div.className = "red";

  } else if (attributes.green) {

    div.className = "green";

  } else if (attributes.blue) {

    div.className = "blue";

  }

  return div;

}, {

  booleans: ["red", "green", "blue"]

});

```

### Registering a custom attribute

```javascript

Handlebars.registerAttribute("bar", function(element) {

  var style = document.createAttribute("style");

  style.className = "purple";

  return style;

}, {

  ready: function(element) {

    // Use this callback for listening to element events.

  }

});

```

### After ```parseHTML```

```html



  
Now you can write custom elements and attributes with Handlebars!

  
Hello World Red

  
Hello World Green

  
Hello World Blue

  
Hello World Purple



```


## License

MIT © [Mateus Maso](http://www.mateusmaso.com)