Function mount

  • Like Store.observe, but allow the function to create DOM elements using Store.node.

    Example

    let store = new Store(0)
    setInterval(() => store.modify(v => v+1), 1000)

    mount(document.body, () => {
           node('h2', `${store.get()} seconds have passed`)
    })

    An example nesting Store.observe within mount:

    let selected = new Store(0)
    let colors = new Store(new Map())

    mount(document.body, () => {
        // This function will never rerun (as it does not read any `Store`s)
        node('button', '<<', {click: () => selected.modify(n => n-1)})
        node('button', '>>', {click: () => selected.modify(n => n+1)})
        
        observe(() => {
            // This will rerun whenever `selected` changes, recreating the <h2> and <input>.
            node('h2', '#'+selected.get())
            node('input', {type: 'color', value: '#ffffff'}, colors.ref(selected.get()))
        })
        
        observe(() => {
            // This function will rerun when `selected` or the selected color changes.
            // It will change the <body> background-color.
            prop({style: {backgroundColor: colors.get(selected.get()) || 'white'}})
        })
    })

    Parameters

    • parentElement: undefined | Element

      A DOM element that will be used as the parent element for calls to node.

    • func: (() => void)

      The function to be (repeatedly) executed, possibly adding DOM elements to parentElement.

        • (): void

        • Returns void

    Returns void

Settings

Member Visibility

Theme

Generated using TypeDoc