Skip to main content

parent-child relation

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://unpkg.com/xnew@3.0.x/dist/xnew.js"></script>
</head>

<body>
  <script>
    // reset button
    xnew((self) => {
      const reset = xnew(Button, 'reset');
      let parent = xnew(Parent);
      let console = xnew(Console);
      reset.on('click', () => {
        parent.finalize();
        console.finalize();
        parent = xnew(Parent);
        console = xnew(Console);
      });
    });

    // parent component
    function Parent(self) {
      xnew.nest({ style: { padding: '6px', background: '#08F' }});
      xnew({ tagName: 'span' }, 'parent');

      const button1 = xnew(Button, 'stop');
      const button2 = xnew(Button, 'finalize');
      const text = xnew({ tagName: 'div' });

      let isRunning = false;
      button1.on('click', () => {
        button1.element.textContent = isRunning ? 'start' : 'stop';
        isRunning ? self.stop() : self.start();
      });
      button2.on('click', (event) => self.finalize());

      xnew(Child);

      return {
        start() {
          isRunning = true;
          xnew.emit('+console', 'parent start');
        },
        update(count) {
          text.element.textContent = `count ${count}`;
        },
        stop() {
          isRunning = false;
          xnew.emit('+console', 'parent stop');
        },
        finalize() {
          xnew.emit('+console', 'parent finalize');
        },
      };
    }

    // child component
    function Child(self) {
      xnew.nest({ style: { padding: '6px', background: '#F80' }});
      xnew({ tagName: 'span' }, 'child');

      const button1 = xnew(Button, 'stop');
      const button2 = xnew(Button, 'finalize');
      const text = xnew({ tagName: 'div' });

      let isRunning = false;
      button1.on('click', (event) => {
        button1.element.textContent = isRunning ? 'start' : 'stop';
        isRunning ? self.stop() : self.start();
      });
      button2.on('click', (event) => self.finalize());

      return {
        start() {
          isRunning = true;
          xnew.emit('+console', 'child start');
        },
        update(count) {
          text.element.textContent = `count ${count}`;
        },
        stop() {
          isRunning = false;
          xnew.emit('+console', 'child stop');
        },
        finalize() {
          xnew.emit('+console', 'child finalize');
        },
      };
    }

    function Button(self, text) {
      xnew.nest({ tagName: 'button', style: { width: '60px', margin: '6px' }});
      self.element.textContent = text;
    }

    function Console(self) {
      xnew.nest({ style: { margin: '16px 0', border: 'solid 1px #AAA' }});
      xnew({ tagName: 'div', style: { background: '#DDD' } }, 'console');
      
      const list = [];
      let autoincrement = 0;
      self.on('+console', (text) => {
        list.push(xnew({ tagName: 'div' }, autoincrement++ + ': ' + text));
        if (list.length > 6) {
          list.shift().finalize();
        }
      });
    }
  </script>
</body>

</html>