ef Value Subscribing demo

by Yukino Song

HTML

<script src="https://cdn.jsdelivr.net/npm/ef.js@latest"></script>

JavaScript

const { t } = ef

const demo = new t`
>div
  .Type something here:
  >br
  >textarea
    #rows = 5
    #cols = 40
    %value = {{inputVal = 1234567890&nabcdefg}}
  >br
  >button
    @click = toggle
    .{{caption = Subscribe}}
  >br
  .Reversed output:
  >pre
    .{{reversed}}
`

const reverse = ({state, value}) => {
	state.$data.reversed = value.split('').reverse().join('')
}
// demo.$subscribe('inputVal', reverse)

const methods = {
	subscribe({state}) {
		state.$subscribe('inputVal', reverse)
	  state.$methods.toggle = methods.unsubscribe
	  state.$data.caption = 'Unsubscribe'
	},
  unsubscribe({state}) {
    state.$unsubscribe('inputVal', reverse)
    state.$methods.toggle = methods.subscribe
    state.$data.caption = 'Subscribe'
  }
}

demo.$methods.toggle = methods.subscribe

demo.$mount({target: document.body})