Element.setTemplateFile >= 2.0.0

Purpose

Set the template file used to render the inner HTML

Syntax

Element.setTemplateFile ( Stringpath );

You can attach a special template file to a custom element, this will then be used to render the internal HTML of the custom element.

Parameters

path
Path to the template

Examples

Use template with slots

Let's create a new custom element called "string-input":

// Inherit from the Hawkejs.Element class
var StringInput = Function.inherits('Hawkejs.Element', function StringInput() {
	StringInput.super.call(this);
});

// Set the template file
StringInput.setTemplateFile('elements/string_input');

And now create the actual content template of this custom element in elements/string_input.

There are some things you might want to use:

  • Elements with a data-he-slot attribute will get the content of <slot> elements used in the declaration template. You'll see this in action later.
  • The self variable is a reference to the current custom element itself, like $0 is a reference to the current element.
<label>
	<p class="inputlabel">
		<span class="label" data-he-slot="label"></span>
		<span class="description" data-he-slot="description"></span>
	</p>
	<div class="inputbox">
		<input
			name=<% self.getAttribute('input-name') || 'name' %>
			placeholder=<% self.getAttribute('placeholder') %>
			class="input"
			value="<% self.getAttribute('value') || '' %>"
			type=<% self.getAttribute('type') || 'text' %>
		>
	</div>
</label>

Finally, let's use this custom element in an actual template:

<string-input class="inputfield" input-name="my-string-input">
	<span slot="label">This label should be used</span>
	<span slot="description">This is the description</span>
</string-input>

If you render this, the result will be:

<string-input class="inputfield" input-name="my-string-input">
	<label>
    	<p class="inputlabel">
    		<span class="label" data-he-slot="label">This label should be used</span>
    		<span class="description" data-he-slot="description">This is the description</span>
    	</p>
    	<div class="inputbox">
    		<input
    			name="my-string-input"
    			placeholder=""
    			class="input"
    			value=""
    			type="text"
    		>
    	</div>
    </label>
</string-input>