How to decorate a view?


#1

Hi,

In the context of this addon (https://github.com/maestrooo/ember-cli-html5-validation), I have a mixin that automatically adds validation to each built-in EmberJS form component (textarea, input, checkbox). It does not requiers a single modification:

{{input name='bar' required='required'}}

Currently, when I detect an error, I render the error inside a

tag and add it directly using jQuery code inside the mixin (that is injected to each input, textarea and checkbox components). However, this lacks flexibility and I’d like to be able to set my own template file to customize how error are rendered. However, I’d like to keep the feature of NOT having to use other component than the built-in components (so that this library stays completely plug and play).

What I want is being able to render the part that is rendered automatically (the <input …> or <textarea …>) and being able to output additional strings.

For instance, I’ve tried the following:

export default Ember.Mixin.create({
    templateName: 'components/validatable-input'
});

With the following template:

{{#if errorMessage}}
   <p>{{errorMessage}}</p>
{{/if}}

However, because the mixin is injected into the {{input}} component, what this render is:

<input type="text">
   <p>Error</p>
</input>

I’ve tried to use “layoutName” name instead of templateName, but there is the same issue. What I’d like is some keyword that would allow to render the “built-in” template, something like that:

{{default}} // Would render the original string, <input type="text">
{{#if errorMessage}}
<p>{{errorMessage}}</p>

Is this possible?

Thanks!