TypeScript VirtualDOM.realize方法代碼示例

      it('should connect a node to a command', () => {
        let called = false;
        const command = 'commandlinker:connect-node';
        const commands = new CommandRegistry();
        const linker = new CommandLinker({ commands });
        let node: HTMLElement;
        let vnode: VirtualNode;
        const disposable = commands.addCommand(command, {
          execute: () => {
            called = true;
          }
        });

        vnode = h.div({ dataset: linker.populateVNodeDataset(command, null) });
        node = VirtualDOM.realize(vnode);
        document.body.appendChild(node);

        expect(called).to.equal(false);
        simulate(node, 'click');
        expect(called).to.equal(true);

        document.body.removeChild(node);
        linker.dispose();
        disposable.dispose();
      });

 /**
  * Create a button node for the dialog.
  *
  * @param button - The button data.
  *
  * @returns A node for the button.
  */
 createButtonNode(button: IButton): HTMLElement {
   let className = this.createItemClass(button);
   // We use realize here instead of creating
   // nodes with document.createElement as a
   // shorthand, and only because this is not
   // called often.
   return VirtualDOM.realize(
     h.button({ className },
           this.renderIcon(button),
           this.renderLabel(button))
   );
 }

 /**
  * Create the header of the dialog.
  *
  * @param title - The title of the dialog.
  *
  * @returns A widget for the dialog header.
  */
 createHeader(title: HeaderType): Widget {
   let header: Widget;
   if (typeof title === 'string') {
     header = new Widget({ node: document.createElement('span') });
     header.node.textContent = title;
   } else {
     header = new Widget({ node: VirtualDOM.realize(title) });
   }
   header.addClass('jp-Dialog-header');
   Styling.styleNode(header.node);
   return header;
 }

      it('should render the model into a virtual DOM table', () => {
        let model = new CSVModel({ content: CSV_DATA });
        let table = new TestTable();
        table.model = model;

        let rendered = VirtualDOM.realize(table.render() as VirtualElement);
        let rows = rendered.getElementsByTagName('tr');
        let cols = rendered.getElementsByTagName('th');
        expect(rows).to.have.length(DISPLAY_LIMIT);
        expect(cols).to.have.length(4);

        model.dispose();
        table.dispose();
      });

 /**
  * Create the body of the dialog.
  *
  * @param value - The input value for the body.
  *
  * @returns A widget for the body.
  */
 createBody(value: BodyType<any>): Widget {
   let body: Widget;
   if (typeof value === 'string') {
     body = new Widget({ node: document.createElement('span') });
     body.node.textContent = value;
   } else if (value instanceof Widget) {
     body = value;
   } else {
     body = new Widget({ node: VirtualDOM.realize(value) });
   }
   body.addClass('jp-Dialog-body');
   Styling.styleNode(body.node);
   return body;
 }

 it('should style descendant nodes for the given tag', () => {
   let vnode = h.div({}, [h.span(), h.div({}, h.span())]);
   let node = VirtualDOM.realize(vnode);
   Styling.styleNodeByTag(node, 'span');
   expect(node.querySelectorAll('.jp-mod-styled').length).to.equal(2);
 });

 it('should create a real DOM node from a virtual DOM node', () => {
   let node = VirtualDOM.realize(h.div([h.a(), h.img()]));
   expect(node.nodeName.toLowerCase()).to.equal('div');
   expect(node.children[0].nodeName.toLowerCase()).to.equal('a');
   expect(node.children[1].nodeName.toLowerCase()).to.equal('img');
 });

  export function createCellDragImage(
    activeCell: Cell,
    selectedCells: nbformat.ICell[]
  ): HTMLElement {
    const count = selectedCells.length;
    let promptNumber: string;
    if (activeCell.model.type === 'code') {
      let executionCount = (activeCell.model as ICodeCellModel).executionCount;
      promptNumber = ' ';
      if (executionCount) {
        promptNumber = executionCount.toString();
      }
    } else {
      promptNumber = '';
    }

    const cellContent = activeCell.model.value.text.split('\n')[0].slice(0, 26);
    if (count > 1) {
      if (promptNumber !== '') {
        return VirtualDOM.realize(
          h.div(
            h.div(
              { className: DRAG_IMAGE_CLASS },
              h.span(
                { className: CELL_DRAG_PROMPT_CLASS },
                '[' + promptNumber + ']:'
              ),
              h.span({ className: CELL_DRAG_CONTENT_CLASS }, cellContent)
            ),
            h.div({ className: CELL_DRAG_MULTIPLE_BACK }, '')
          )
        );
      } else {
        return VirtualDOM.realize(
          h.div(
            h.div(
              { className: DRAG_IMAGE_CLASS },
              h.span({ className: CELL_DRAG_PROMPT_CLASS }),
              h.span({ className: CELL_DRAG_CONTENT_CLASS }, cellContent)
            ),
            h.div({ className: CELL_DRAG_MULTIPLE_BACK }, '')
          )
        );
      }
    } else {
      if (promptNumber !== '') {
        return VirtualDOM.realize(
          h.div(
            h.div(
              { className: `${DRAG_IMAGE_CLASS} ${SINGLE_DRAG_IMAGE_CLASS}` },
              h.span(
                { className: CELL_DRAG_PROMPT_CLASS },
                '[' + promptNumber + ']:'
              ),
              h.span({ className: CELL_DRAG_CONTENT_CLASS }, cellContent)
            )
          )
        );
      } else {
        return VirtualDOM.realize(
          h.div(
            h.div(
              { className: `${DRAG_IMAGE_CLASS} ${SINGLE_DRAG_IMAGE_CLASS}` },
              h.span({ className: CELL_DRAG_PROMPT_CLASS }),
              h.span({ className: CELL_DRAG_CONTENT_CLASS }, cellContent)
            )
          )
        );
      }
    }
  }