Class: Clone

Clone(selector, classname)

Manages a cloned instance of a template tag. Note that any searches are only performed on the clone's sub-tree (other than the constructor's CSS selector).

Constructor

new Clone(selector, classname)

Finds a template tag, stores it as "clone.template" and clones its content as "clone.root". Note that clones must have a single root element (direct child descendant). This can be easily achieved by wrapping the template's content inside a "div" tag.

Nested templates can't be accessed until the parent tag has been inserted into the DOM tree. If problematic, don't nest your template tags to avoid this issue.
Parameters:
Name Type Default Description
selector string A CSS selector for the template tag to be cloned. For example: "#mytemplate" or "template#mytemplate".
classname string tie For your convenience, this class-name is added to the root element of all clones. If set to "false", will not add any class-name to the root element.
Properties:
Name Type Description
template element A reference to the template element being cloned (will be referred to as the "cloned template").
root element A reference to the root element cloned from the template (referred as the "template's clone").
bindings map A map with arrays of call-back functions by property names (registered with "clone.bind()").
Source:

Classes

Clone

Methods

bind(property, callback)

Binds a call-back to an object's property. The object must have been previously-trapped with "clone.trap()". Any number of properties and call-backs can be registered, including multiple call-backs for the same property.
Parameters:
Name Type Description
property string A property name. For example: a property "p" for a previously-trapped "o" object instance will bind "o.p".
callback function Will be called whenever the bound-property of the previously-trapped-object is changed. This function will be called with the same arguments as: https://mdn.io/handler.set()
Source:

create(parent)

Appends the root element to the template's parent element by default. Returns this clone instance, for call-chaining.

Always create a new Clone instance for each clone to be managed. "clone.create()" won't clone the template again by itself.
Parameters:
Name Type Default Description
parent element false If present, append to this element instead.
Source:

deafen(selector, callback)

Given the same parameters, removes a listener previously registered with "clone.listen()".
Parameters:
Name Type Description
selector string Same value as passed to "clone.listen()".
callback function Same value as passed to "clone.listen()".
Source:

free(property, callback)

Removes a call-back binding registered with "clone.bind()".
Parameters:
Name Type Description
property string Same value as passed to "clone.bind()".
callback function Same value as passed to "clone.bind()".
Source:

get(attribute)

Parameters:
Name Type Description
attribute string Find an element that has this HTML attribute and return the attribute's value.
Source:

listen(selector, callback)

Listen for a default event from a single target-element.
Parameters:
Name Type Description
selector string Given a CSS selector...
callback function Registers a call- back of the target-element's default event type.
Source:

react(callback)

React to events from all interactive elements in the clone's sub-tree. For example: to register a single function that will render a preview when any input in a form is changed.
Parameters:
Name Type Description
callback function Registers a call-back to all supported elements, using each element's default event type.
Source:

remove()

Removes the root element from the DOM-tree.
Source:

select(selector)

Parameters:
Name Type Description
selector string A CSS selector to find and return a sub-tree element.
Source:

selectAll(selector)

Parameters:
Name Type Description
selector string A CSS selector to find and return multiple sub-tree elements.
Source:

selectall()

Lower-case alias for "clone.selectAll()".
Source:

set(attribute, value)

Use this to alter a standard HTML attribute (such as an anchor's "href") or to store data in an attribute declared anywhere in your sub-tree. This can be useful in many cases, such as for selecting the element with the CSS query: "*[attribute='value']".

Note that the W3C suggests non-standard attribute names should have the "data-' prefix.
Parameters:
Name Type Description
attribute string Find an element that has this HTML attribute...
value string Then set the attribute to this value.
Source:

trap(target)

Returns a proxy object whose properties can then be bound with "clone.bind()". Bound call-backs will only be called when using this method's returned proxy so it's good practice to discard the original object's reference.

Each clone instance is designed to trap a single object. Consider using more clones or creating Proxy instances in client-code instead of calling this method more than once per instance.

For internal use, adds a "proxy.clone" reference to this clone object.
Parameters:
Name Type Default Description
target object false An object instance to trap. If not provided, will default to trapping this clone instance. Can be used to trap a different data or control object as well, using the clone to react to its changes.
Source: