unpack-element
unpack an element's children based on markers
Example
Take a dom element and unpack it into it's children based on their markers
var unpack = var elements = elementsroot // that divelementslist // that ulelementsfoo // that span
Example with root markers
If you have server side generated DOM your page may be generated with multiple templates which each use unpack-element to extract their nodes. Ideally your top call to unpack-element won't recursively unpack every sub template as you only care about the top layer.
var unpack = var elements = elementsthingList // that divelementsotherList // that other divelementsroot // document.body var childElems = childElemsroot // that divchildElemslist // that ulchildElemsfoo // that span
When unpack reaches a data-rootmarker
instead of a data-marker
it will store that elem on the returned object with the
marker but not recurse into it's children.
This strategy also works well for lists of sub elements where you want to only to fetch the root element of each sub template
Item 1 X Item 2 X
var unpack = var elements = elementslist // that ulelementsfoo // that spanelementslistItems /* { 1: thatFirstLi, 2: thatSecondLi} */ var firstSubTemplate = firstSubTemplateremove // that button
This style of using data-rootmarker
allows you to unpack
an entirely pre-rendered tree of templates and sub
templates without having to worry about name collisions
Example with array syntax
var unpack = var elements = elementsbuttons // [button.foo, button.bar]
You can use []
syntax to mark that element as being part of
an array. This means that the property on the return object
will always be an array even if there is only one element
with the buttons[]
data-marker
Example with class mapping
var unpack = var elements = elementsroot // that divelementslist // that ulelementsfoo // that span
Installation
npm install unpack-element
Contributors
- Raynos