Component

Sub Component

A html DOM node can repesent a component. To declare a component use a comment block

<!-- {{component:<mySubComponent>}} -->.

import Keet, { html, childLike } from 'keet'

@childLike() // babel-plugin-transform-decorators
class Sub extends Keet {
  el = 'sub'
  render() {
    return html`

      <div id="sub">
        this is a sub-component
      </div>
    `

  }
}

const sub = new Sub()

class App extends Keet {
  el = 'app'
  render() {
    return html`

      <div id="container">
        <div>parent</div>
        <!-- {{component:sub}} -->
      </div>
    `

  }
}

const app = new App()

Codepen Sample

See the Pen Keetjs - Component by Shahrul Nizam b. Selamat (@syarul) on CodePen.

Notifying state changes across different components

Each component has pub/sub methods where another component can subscribe to changes in another component i.e

// file main.js
import Keet from 'keet'

import other from './other'

class Main extends Keet {
  constructor() {
    super()
    this.state = 'main'
    other.subscribe(state => this.state = state)
  }
}

const main = new Main()

on another file

// file other.js
import Keet from 'keet'

class Other extends Keet {}

const other = new Other()

export default other

then invoke the method update

other.inform('other')
← Previous