TypeScript cycle-snabbdom.p函數代碼示例

  function view(isDrawerActive: boolean) {
    const drawer = (
      Drawer(sources, { isolate: false, className: 'drawer', active: isDrawerActive, type: 'left' }, [
        h5('This is a left drawer'),
        p('A drawer can have multiple children controls'),
        Input(sources, { label: 'Input in a Drawer' }).DOM,
      ])
    );

    // (<any>drawer).closeEvent$.subscribe( (x: any) => {
    //   console.log('close obs event: ' + x);
    // });

    return (
      Card(sources, { isolate: false, className: 'demoDrawers' }, [
        CardTitle(sources, { isolate: false, title: 'Drawers (Work in progress)' }, [
          CardText(sources, { isolate: true }, [
            Button(sources, { isolate: false, className: 'showDrawer', label: 'Show Drawer',
              raised: true }).DOM,
            p('is active: ' + isDrawerActive),
            drawer.DOM,
          ]).DOM
        ]).DOM
      ]).DOM
    );
  }

 function view(isDialogActive: boolean) {
   return (
     DemoCardView(sources, 'Dialogs (Work in progress)', [
       CardText(sources, [
         Button(sources, { className: 'showDialog', label: 'Show Modal Dialog',
           raised: true }).DOM,
         p('is active: ' + isDialogActive),
         Dialog({ title: 'Test Dialog', active: isDialogActive,
           actions: [cancelButton.DOM, saveButton] }, [
             p('This is a dialog'),
             p('A dialog can have multiple children controls')
           ]
         ).DOM
       ]).DOM
     ])
   );
 }

  const vtree$ = props$.map( (props) => {

    const className = classNames(style.cardText, props.className);
    console.log(children);
    return (
      div( { props: { className } },
        typeof children === 'string' ? p(children) : children
      )
    );
  });

export function FooterView() {
  return (
    footer(`.${style.footer}`, [
      p([
        'Š ',
        a({
          'props': {
            'href': 'https://eldarlabs.com'
          }
        }, `Eldar Labs`),
        ' 2016'])
    ])
  );
}

  const vtree$ = props$.map( (props) => {

    //TODO: do Avatars at some point

    //let avatarComponent;

    // if (typeof avatar === 'string') {
    //   avatarComponent = <Avatar image={avatar} />;
    // } else {
    //   avatarComponent = avatar;
    // }

    const className = classNames(style.cardTitle, {
      // [style.small]: props.avatar,
      // [style.large]: !props.avatar
    }, props.className);
    const titleDOM = props.title &&
      h5(`.${style.title}`, props.title);

    const childrenAsStringDOM = children && typeof children === 'string' &&
      h5(`.${style.title}`,
        children
      );

    const subtitleDOM = props.subtitle &&
      p(`.${style.subtitle}`, props.subtitle);

    const childrenAsArray = children && typeof children !== 'string' &&
      children;

    return (
      div( { props: { className } }, [
        div(concat([],
          titleDOM,
          childrenAsStringDOM,
          subtitleDOM,
          childrenAsArray
        )),
      ]
      // [
      //   //TODO: Avatars
      //   // {avatarComponent && (
      //   //   <div className={style.avatar}>
      //   //     {avatarComponent}
      //   //   </div>
      //   // )}
      // ]
      )
    );
  });

export function SpielView() {
  return (
    h2('Kitchen Sink'),
    p([
      'Demo site for ',
      a({
        'props': {
          'href': 'https://github.com/eldarlabs/cycle-ui'
        }
      }, 'Cycle-UI'),
      ' using ',
      a({
        'props': {
          'href': 'https://github.com/eldarlabs/cycle-ui-typescript-webpack'
        }
      }, 'cycle-ui-typescript-webpack'),
      ' starter project.'
    ])
  );
}

 DOM: count$.map(count =>
     div([
       Button(sources, { className: 'decrement', label: 'Decrement' }).DOM,
       Button(sources, { className: 'increment', label: 'Increment' }).DOM,
       p('Counter: ' + count)
     ])