jFactory > Reference > Traits > TraitDOM

TraitDOM

Registry / Methods / Usages

Registers the result of a jQuery selection that will be automatically removed from document at Remove Phase. Also supports <template> cloning and dom creation from string.

Registry

myComponent.$.dom

Injected Methods

$dom(registryId {string}, jQueryArgument [, appendTo])

Returns: jQuery selection

Registers the jQuery selection returned by $(jQueryArgument), with the key registryId.

The jQueryArgument can be:

• an HTML string: "<div></div><div></div>"
• a selector: "#myElement .myClass"
• a jQuery: $(...)

See also https://api.jquery.com/jQuery.

Note: $dom() should only be used to register root containers that must be cleared later with all their contents. It is useless to call $dom() for childNodes of these containers.

Using a <template>

If the result of $(jQueryArgument) is an HTMLTemplate, the returned dom is cloned from its content.

Register existing Elements from a Selector

   myComponent.$dom("boxes", "#box1 .boxes, #box2 .boxes")

Register new Elements from HTML with optional “appendTo”

   myComponent
    .$dom("boxes", '<div id="box1"><div id="box2">', "body")
  
   // is a shortcut for:

   myComponent
    .$dom("boxes", '<div id="box1"><div id="box2">')
    .appendTo('body')

• Setting the Element id on the fly

  Preceding the registryId with a “#” will also set the Element id of the first resulting element:

  myComponent.$dom("#box1", "<div>").appendTo("body")
  // => creates a div with id = box1
  

$domFetch(registryId {string}, url {string} [, fetchOptions {object} = {}] [, appendTo])

Returns: JFactoryPromise resolved as a jQuery

Register the jQuery selection resulting from the HTMLFragment loaded from url and returns a promise that can be awaited.

Defers current Phase: This method registers a Task that blocks the resolution of the current Phase (if any) until the whole Task chain (including subpromises) is resolved.

Auto completed: The promise chain is completed and expired as soon as all subpromises are resolved. This behavior can be disabled by setting anyPromiseOfTheChain.$chain.chainConfig.chainAutoComplete = false before the promise chain is completed.

• Setting the Element id on the fly

  Preceding the registryId with a “#” will also set the Element id of the first resulting element. See $dom()

$domRemove(registryId {string} [, reason {string} = "$domRemove()]")

Removes the DOM registered with the key registryId previously created by $dom() or $domFetch(). An optional reason can be given for debugging the aborted domFetch() Promise Chain.

$domRemoveAll(removePhase)

(Automatically called at Remove Phase)

Removes any DOM Elements previously registered by $dom() or $domFetch() if their Remove Phase match the given removePhase.

myComponent.$domRemoveAll(jFactory.PHASE.DISABLE)

Usages