Overview
Searches for HTML elements with the
data-me-ref attribute within a root element. Returns an object whose keys are the attribute values and whose values are the corresponding HTML elements. Supports dot-separated keys for nested objects and automatically converts to arrays when multiple elements share the same ref.Signature
resolveRefs(rootElement?: string | HTMLElement): {[key: string]: HTMLElement | HTMLElement[]}
| Parameter | Type | Default | Description |
|---|---|---|---|
rootElement |
string | HTMLElement |
'body' |
CSS selector or HTMLElement to search within. |
Returns:
{[key: string]: HTMLElement | HTMLElement[]} — Object mapping ref names to elements.Example
Found refs:
Click the button to run
<div id="resolveRefsDemo">
<div class="mb-3">
<label class="form-label" data-me-ref="title">Title Element</label>
<input data-me-ref="input" class="form-control form-control-solid" value="Hello">
</div>
<div class="mb-3">
<button data-me-ref="button" class="btn btn-light">Sample Button</button>
</div>
</div>
<button id="resolveRefsBtn" class="btn btn-primary mb-3">Run resolveRefs</button>
<div>
<span class="fw-bold">Found refs: </span>
<code id="resolveRefsResult">Click the button to run</code>
</div>
document.getElementById('resolveRefsBtn').addEventListener('click', function() {
var refs = metronicExtension.utils.resolveRefs('#resolveRefsDemo');
var keys = Object.keys(refs);
document.getElementById('resolveRefsResult').textContent = JSON.stringify(keys);
});