HTMLBars is a layer built on top of the Handlebars template compiler.
This means that helpers can have special behavior based on their context (they know if they are inside an
Ultimately, the goal is to have a good data binding setup for Handlebars that can work directly against DOM nodes and doesn't need special tags in the String for the data binding code to work (a major limitation in Ember).
There are also many performance gains in HTMLBars' approach to building DOM vs the HTML-unaware string building approach of Handlebars.
ultimately becomes:
In this example, HTMLBars is aware that values set to
HTML has many interesting contexts, in each HTMLBars aims to do the right thing. This may be, using the correct browser API, sanitizing, or disabling a feature entirely.
Needless to say, we take security very seriously. If there is something we missed, please report via the Ember.js responsible security disclosure system.
Until then, check out ARCHITECTURE.md for info on how HTMLBars is structured and its approach to efficiently building / emitting DOM.
Ember CLI is a CI tool, so it will run tests as you change files.
Goals
The goal of HTMLBars is to have a compiler for Handlebars that
builds a DOM rather than a String.This means that helpers can have special behavior based on their context (they know if they are inside an
<a>
tag, inside an
attribute, etc.)Ultimately, the goal is to have a good data binding setup for Handlebars that can work directly against DOM nodes and doesn't need special tags in the String for the data binding code to work (a major limitation in Ember).
There are also many performance gains in HTMLBars' approach to building DOM vs the HTML-unaware string building approach of Handlebars.
Security
HTMLBars aims to not only ease interacting with data-bound templates,
but also to provide it in a secure-by-default way. Thanks to the design
of HTMLBars it has both handlebars and HTML awareness, this allows for
best practices by default. For example:<div>{{fullName}}</div>
ultimately becomes:
var div = document.createElement('div');
div.textContent = fullName; // when fullName changes
In this example, HTMLBars is aware that values set to
textContent
on a div
is treated by the browser as inert text. In other words, in this scenario HTMLBars
knows the content is safe, and no escaping is required.HTML has many interesting contexts, in each HTMLBars aims to do the right thing. This may be, using the correct browser API, sanitizing, or disabling a feature entirely.
Needless to say, we take security very seriously. If there is something we missed, please report via the Ember.js responsible security disclosure system.
Usage
TODO: much change. This section will be updated shortly.Until then, check out ARCHITECTURE.md for info on how HTMLBars is structured and its approach to efficiently building / emitting DOM.
Building HTMLBars
- Ensure that Node.js is installed.
- Run
npm install
to ensure the required dependencies are installed. - Run
npm run-script build
to build HTMLBars. The builds will be placed in thedist/
directory.
How to Run Tests
Via Ember CLI
- Run:
ember test --server
Ember CLI is a CI tool, so it will run tests as you change files.
On the console with PhantomJS
- Run
npm test
.
In a browser
- Run
npm start
. - Visit .