[Question] Standalone usage (in combination with bound-templates.js?!)

[asciidisco]

Hi there, I´ve used handlebars for quite some time now in various combinations (with Backbone, Ampersand, in Node, etc.) & thought that I might should give htmlbars a spin, by upgrading a tiny ampersand demo application with already existing handlebars templates.

And after some hard time wiring all the pieces together I actually got it running, even with precompiled templates on the server. Everything works as expected, the string concat monster is gone & the pure DOM beast is unleashed.

What does not work as expected, is the data binding. I first thought that you would get this with htmlbars for free & tried this naive approach (hoping for some magic to kick in):

var data = {test: 'foo'};
var output = document.getElementById('output');
var DOMHelper = requireModule('dom-helper').default;
var runtime = requireModule('htmlbars-runtime');
var hooks = runtime.hooks;
var helpers = runtime.helpers;
var env = { dom: new DOMHelper(), hooks: hooks, helpers: helpers };
var dom = template.render(data, env, output);
output.appendChild(dom);
setInterval(function () {
  data.test = (data.test === 'foo' ? 'bar' : 'foo');
}, 2000);

The initial render happened, but none of the updates to the data object made it to my screen. Then after watching a video (from EmberConf I guess), I learned that the data binding stuff lives in bound-templates.js; I first tried to install it via npm, but it seems that it is not published yet. I eventually got it running in my demo page, but without any effect (and it actually forced me to load the htmlbars-compiler on that page, which I do not want, because precompiling FTW).

So, basically my question is, am I missing something really obvious here? Is the data binding component really not a part of htmlbars? If so, is using bound-templates the right way to go? If so, I would really appreciate an example.

Thank you in advance.

Cheers Sebastian

[mmun]

HTMLBars isn't ready for standalone usage yet. There's a substantial rewrite happening in this PR: https://github.com/tildeio/htmlbars/pull/282.

I don't think that PR includes built in data bindings, but it does provide the right primitives to let you integrate with your own data binding layer. I'd like to revisit this question once it lands.

[krisselden]

@asciidisco look at the tests in #282 for examples of how you would update the template.

[matthewrobb]

@mmun I am LITERALLY waiting on the edge of my seat to hear your re-visitation of this question :P

[mmun]

It should be ready in around 6 weeks, when we intend to merge the glimmer branch into Ember.

[devel-pa]

I am using marionette and I can use HTMLBars as standalone. To do that you have to:

• add at the beginning of your scripts

var DOMHelper = require('../node_modules/htmlbarsify/node_modules/htmlbars/dist/cjs/dom-helper.js').default;
window.DOMHelper = new DOMHelper();
window.HTMLBars = require('../node_modules/htmlbarsify/node_modules/htmlbars/dist/cjs/htmlbars-runtime.js');

• override the renderer

var tpl = HTMLBars.render(template, { dom: DOMHelper, hooks: HTMLBars.hooks }, self, {})
 tpl.render(data);
 return tpl.fragment;

• override ItemView attachElContent

this.el.appendChild(html);

It is only 'usage' not integration.

Paul

[matthewrobb]

Heya @mmun a little Tweety bird brought wind of a certain merge having taken place recently :P

[mmun]

The rewrite was much larger in scope than I expected and we're all quite busy with the Ember integration so I don't think HTMLBars will be stabilizing soon.

[matthewrobb]

@mmun Do you guys have a need and/or a desire for contributors? Waiting for this is like waiting for Christmas, all the presents, nicely wrapped, just waiting for you under the DOM tree.

[mmun]

@matthewrobb Yes, always. Please make an issue if you have a question or suggestion about the architecture.

[victorwpbastos]

@devel-pa data binding works too?

[cjaeriksson]

What's the status on this now ?