Creating a bind-attr like helper


#1

I have a model that contains several html attributes (for a form, it can contain action, method, enctype, etc.)

Those parameters are fully optional (a fieldset may or maynot have a name or a form attribute), so there is no set list of attributes.

I’ve been trying to write a bind-attr like helper that could be use like:

<form {{html-attrs obj}}>
</form>

where obj would be a pojo whose keys and values are those of the attributes.

I’ve been trying several approaches, most of them follow this scheme:

  1. Get bind-attr helper (either by accessing it from Handlebars.helpers['bind-attr'] or by using resolveHelper).
  2. Deal with options (basically, deep-merging options.hash and the object that is passed to html-attrs).
  3. Returning whatever bind-attr would have returned given the options created in step 2.

I’ve been having problems both writing the helper and testing it.

While testing it, I’m using the technique used by @rwjblue here. When using this technique I cannot get hold of bind-attr as a property of Ember.Handlebars.helpers and when trying to used the resolveHelper way, there is no container in options.data.view to use.

My other big problem is I do not know how to pass binding and not-binding attributes to bind-attr

Current solution

My current solution is something much more simple. The helper looks like this in app/helpers/html-attrs.js

export function htmlAttrs(html) {
    var obj = html.toObject();
    var result = [];
    for(var key in obj) {
        result.push(key + "=\"" + obj[key] + "\"");
    }
    return new Ember.Handlebars.SafeString(result.join(' '));
}

export default Ember.Handlebars.makeBoundHelper(htmlAttrs);

For it to work, it needs to be called using the unbound helper:

<form {{unbound html-attrs obj}}>
</form>

Any hint on how to work out a solution?