∺ Hingejs

HTML Marker

HTML Marker is used to update string literal values without re-rendering any HTML. Child nodes are supported but will not mark string literals that are a child of a custom element. All values are mapped with the _safeHTML() function decorator.

Decorators

Decorators are functions that can be used with string literals

Decorator Description Code Sample
_unsafeHTML() Allows you to output unsafe HTML 
${_unsafeHTML(variable)}

↩ Go Back

Sample code

      import { HtmlMarker } from 'https://cdn.jsdelivr.net/npm/@hingejs/services/index.min.js'

      (async () => {
        let model = { id: new Date().getTime(), test: 'this is a test' }
        const htmlMarker = new HtmlMarker()
        const htmlString = '<p id="${id}">${test}</p><p>${$_unsafeHTML(test)}</p>'
        await htmlMarker.render(document.body, htmlString, model)

        window.setInterval(() => {
          model = { test: `<p>${new Date().getTime()}</p>` }
          htmlMarker.updateModel(model)
        }, 1000)
      })()

Working sample