ef.js Recursive Rendering

by Yukino Song

HTML

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

CSS

.item {
  padding-left: 10px;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
}

JavaScript

const { t, inform, exec } = ef

const _item = t`
>div.item
  .folder {{count}} 
  >button
    @click = addItem
    .+
  >button
    @click = removeItem
    .-
  +list
`

const Item = class extends _item {
	constructor(data) {
  	let count = 0
    Object.assign(data, {
      $methods: {
      	addItem: ({state}) => {
        	count += 1
        	state.list.push(new Item({$data: {count}}))
        },
        removeItem: ({state}) => {
        	state.$destroy()
        }
      }
    })
  	super(data)  
  }
}

;(new Item({$data: {count: 0}})).$mount({target: document.body})