How to use @pluginjs/template - 10 common examples

build() {
    addClass(this.classes.INPUT, this.element)
    this.$wrap = wrap(
      `<div class="${this.classes.NAMESPACE} ${this.classes.WRAP}"></div>`,
      this.element
    )

    if (this.options.theme) {
      addClass(this.classes.THEME, this.$wrap)
    }

    this.TRIGGER = new Trigger(this)

    this.$dropdown = parseHTML(
      template.compile(this.options.templates.dropdown())({
        classes: this.classes
      })
    )
    this.$action = parseHTML(
      template.compile(this.options.templates.previewContent())({
        classes: this.classes
      })
    )
    this.$videoPreview = parseHTML(
      template.compile(this.options.templates.videoPreview())({
        classes: this.classes
      })
    )
    this.$wrap.append(this.$dropdown)
    // set Aspect Ratio
    const sourceData = []

buildPack(pack) {
    if (!this.packTemplate) {
      this.packTemplate = templateEngine.compile(
        this.options.templates.pack.call(this)
      )
    }

    const $pack = parseHTML(
      this.packTemplate({
        classes: this.classes,
        pack
      })
    )

    pack.__dom = $pack
    pack.__items = {}

    if (pack.classifiable === false) {
      each(pack.icons, (name, label) => {

build() {
    addClass(this.classes.ELEMENT, this.element)

    this.$wrapper = wrap(
      `<div class="${this.classes.WRAPPER}"></div>`,
      this.element
    )

    if (this.options.theme) {
      addClass(this.getThemeClass(), this.$wrapper)
    }

    this.$list = appendTo(
      template.compile(this.options.templates.container())({
        classes: this.classes
      }),
      this.$wrapper
    )

    this.buildItems()
  }

buildItem(item) {
    if (!this.itemTemplate) {
      this.itemTemplate = templateEngine.compile(
        this.options.templates.item.call(this)
      )
    }
    const nvalue = this.setMatchItem(item)
    const $item = parseHTML(
      this.itemTemplate({
        classes: this.classes,
        item,
        value: this.getItemValue(item),
        label: nvalue
      })
    )

    return $item
  }

createHotspots() {
    const template = templateEngine.compile(
      this.options.templates.hotspot.call(this)
    )
    const iconTemplate = templateEngine.compile(
      this.options.templates.icon.call(this)
    )
    const textTemplate = templateEngine.compile(
      this.options.templates.text.call(this)
    )
    const dotTemplate = templateEngine.compile(
      this.options.templates.dot.call(this)
    )
    const numberTemplate = templateEngine.compile(
      this.options.templates.number.call(this)
    )

    let html = ''
    let label = ''
    let type = ''

    this.options.data.forEach(item => {
      type = item.type ? item.type : this.options.type
      switch (type) {
        case 'icon':
          label = iconTemplate({
            classes: this.classes,
            icon: item.icon ? item.icon : this.options.icon
          })
          break

createEl(tempName, options) {
    return parseHTML(
      template.compile(this.options.templates[tempName]())(options)
    )
  }

throwError(error) {
    this.resolveLoading()

    if (!this.$error) {
      this.$error = parseHTML(
        template.compile(this.options.templates.error(error))({
          classes: this.classes,
          errorText: this.translate('errorText')
        })
      )
    }

    insertBefore(this.$error, this.$last)

    if (this.options.trigger === 'button') {
      this.$button.remove()
    }

    this.trigger(EVENTS.ERROR, error)
    this.enter('error')
  }

createEl(tempName, options) {
    return parseHTML(
      template.compile(this.options.templates[tempName]())(options)
    )
  }

initialize() {
    const html = template.compile(this.instance.options.internal.template())({
      classes: this.instance.classes,
      field: this.instance.getClassName(
        this.instance.classes.NAMESPACE,
        'internal'
      ),
      internal: this.instance.translate('internal')
    })
    this.$wrap = parseHTML(html)
    this.$content = query(`.${this.instance.classes.FIELDCONTENT}`, this.$wrap)
    this.element = query(
      `.${this.instance.classes.CASCADERTRIGGER}`,
      this.$content
    )
    this.CASCADER = Cascader.of(this.element, {
      source: this.instance.options.internalValue,
      keyboard: true,

if (this.options.title !== '') {
      title = templateEngine.render(this.options.templates.title.call(this), {
        classes: this.classes
      })
    }

    if (this.options.content !== '') {
      content = templateEngine.render(
        this.options.templates.content.call(this),
        { classes: this.classes }
      )
    }

    if (this.options.buttons) {
      buttons = templateEngine.render(
        this.options.templates.buttons.call(this),
        { classes: this.classes }
      )
    }

    if (this.options.icon) {
      icon = templateEngine.render(this.options.templates.icon.call(this), {
        classes: this.classes,
        iconClass: this.getIconClass()
      })
      this.$icon = parseHTML(icon)
    }

    const html = templateEngine.render(this.options.template.call(this), {
      classes: this.classes,
      overlay,