TypeScript dom.makeDOMDriver函数代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了TypeScript中@cycle/dom.makeDOMDriver函数的典型用法代码示例。如果您正苦于以下问题：TypeScript makeDOMDriver函数的具体用法？TypeScript makeDOMDriver怎么用？TypeScript makeDOMDriver使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。

在下文中一共展示了makeDOMDriver函数的10个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: startPanel

export function startPanel(graph$: Stream<string>): void {
  const adHocContainer: Element = document.createElement('DIV');
  adHocContainer.id = '#ad-hoc-container';
  document.body.appendChild(adHocContainer);
  const domDriver = makeDOMDriver(
    document.querySelector('#tools-container') || adHocContainer,
  );

  const domSinkProxy = xs.create<VNode>();
  const domSource = domDriver(domSinkProxy, xsSA);

  const panelSources = {graph: graph$, DOM: domSource};
  const panelSinks = Panel(panelSources);

  styles.inject();
  domSinkProxy.imitate(panelSinks.DOM);
  panelSinks.zapSpeed.addListener({
    next(s: ZapSpeed) {
      // alert('PANEL posting message to graph serializer: ' + s);
      window['postMessageToGraphSerializer'](s);
    },
    error(err: any) { },
    complete() { },
  });
}

开发者ID:whitecolor，项目名称:cyclejs，代码行数:25，代码来源:index.ts

示例2: run

import main from './main';
import { run } from '@cycle/xstream-run';
import { makeDOMDriver } from '@cycle/dom';

run(main, {
  dom: makeDOMDriver('#app')
});

开发者ID:artfuldev，项目名称:recall-cycle，代码行数:7，代码来源:app.ts

示例3: run

import {run} from '@cycle/xstream-run';
import {makeDOMDriver} from '@cycle/dom';
import Counter from './Counter';

const main = Counter;

run(main, {
  DOM: makeDOMDriver('#main-container')
});

开发者ID:mxstbr，项目名称:cyclejs-counter，代码行数:9，代码来源:index.ts

示例4: require

import {test} from '../testsuite';
import {bowlingLineTests} from './bowlingLine/index.spec';
import {makeDOMDriver} from '@cycle/dom';
import {run} from '@cycle/rxjs-run';
import {main} from './main';
import {mainTests} from './main.spec';
require('./styles.css');

test('FRP Bowling Kata', function() {
  test('FRP Bowling Kata Application Mainline', mainTests);
  test('FRP Bowling Kata BowlingLine Component', bowlingLineTests);
});

run(main, {DOM: makeDOMDriver('#app')});

开发者ID:wizardwerdna，项目名称:FRPBowlingKata，代码行数:14，代码来源:app.ts

示例5: div

        transform: `translate(${link.position.x}px, ${link.position.y}px)`
      }
    }, [img({ attrs: { src: link.image }})]))

  return div(vnodes)
}

function main({ time, DOM }) {

  const raf$ = time.animationFrames()

  const pause$ = DOM
    .select("document")
    .events("keyup")
    .filter(event => event.keyCode == 32)
    .fold(acc => !acc, false)

  return {
    DOM: raf$
      .compose(sampleCombine(pause$))
      .filter(([_, paused]) => !paused)
      .fold(updateState, links)
      .map(render)
  }
}

run(main, {
    DOM: makeDOMDriver("#main"),
    time: timeDriver
});

开发者ID:atomrc，项目名称:find.thomasbelin.fr，代码行数:30，代码来源:application.ts

示例6: run

    //       return {
    //         name: s.name,
    //         input
    //       }
    //     }).debug((x: any) => console.log('debug', x)) // Object {name...}
    // ).debug((x: any) => console.log('debug2', x)) // Stream
    // .flatten()
    // .debug((x: any) => console.log('debug3', x)) // nothing
    sendUpdate: xs.combine(
      state$.compose(dropRepeats<Model>((a, b) => a.shows === b.shows)),
      keyboard.filter((x: Input) => x === 'increment' || x === 'decrement')
    )
      .compose(debounce(100))
      .map(([state, input]: [Model, Input]): Update => {
        const s = state.shows[state.cursor];
        return {
          name: s.name,
          count: s.count,
          input
        }
      })
  };
}

run(main, {
  DOM: makeDOMDriver('#app'),
  keyboard: makeKeyboardDriver(),
  scrollIntoView: makeScrollIntoViewDriver(),
  sendUpdate: makeSendUpdateDriver()
});

开发者ID:justinwoo，项目名称:tracker，代码行数:30，代码来源:index.ts

示例7: makeDOMDriver

      data: { id, label }
    })),
    board.noteDelete$.map(id => ({
      type: 'delete-note',
      data: { id }
    }))
  )

  return {
    DOM: board.DOM,
    websocket: Stream.merge(boardWebsocket$, Stream.of({ type: 'init' }))
      .debug('websocket$'),
    preventDefault: board.preventDefault,
    focus: board.focus,
  }
}

Cycle.run(main, {
  DOM: makeDOMDriver('#root'),
  websocket: createWebsocketDriver('http://localhost:3000'),
  focus: createFocusDriver(),
  preventDefault: (event$: Stream<Event>) => {
    event$.addListener({
      next: (e) => e.preventDefault(),
      error: (err) => console.error(err),
      complete: () => {}
    })
    return {}
  },
})

开发者ID:JamesHageman，项目名称:xstream-scrumbler，代码行数:30，代码来源:index.ts

示例8: main

import xs from "xstream";
import {run} from "@cycle/xstream-run";
import {makeDOMDriver, h1} from "@cycle/dom";



function main() {
	const sinks = {
		DOM: xs.periodic(1000).map(i => h1('' + i + " seconds elapsed"))
	};
  return sinks;
}

const drivers:{[name:string]: Function} = {
	DOM: makeDOMDriver("#app")
}

run(main, drivers);

开发者ID:udondokodoon，项目名称:touchevents，代码行数:18，代码来源:main.ts

示例9: run

console.clear();
import {Observable} from 'rxjs';
import {run} from '@cycle/rxjs-run';
import {div, input, li, hr, h1, button, b, br, span, ul, label, makeDOMDriver} from '@cycle/dom';
import {makeHTTPDriver} from '@cycle/http';
import * as $ from 'jquery';

run(main, {DOM: makeDOMDriver('#app'), HTTP: makeHTTPDriver()});

function main(sources) {
  const loadButton$ = sources.DOM.select('button').events('click')
    .startWith(null);
  const searchInput$ = sources.DOM.select('#search').events('input');

  const search$ = searchInput$
    .map(evt => evt.target.value)
    .startWith('');

  const request$ = loadButton$
    .mapTo({
      url: eldenStream(),
      method: 'GET',
      headers: {
        'Content-Type': 'application/json; charset=utf-8',
        'Access-Control-Allow-Origin': '*',
      },
      category: 'eldenStream'
    })
    ;

  const products$ = sources.HTTP

开发者ID:wizardwerdna，项目名称:CycleSimpleFormExample，代码行数:31，代码来源:boilerplate.ts

示例10: run

import {makeDOMDriver} from '@cycle/dom';
import {run} from '@cycle/rxjs-run';

import {BOAT_HOST, BOAT_PORT} from '../../constants';
import {Settings} from '../components/Settings';
import {makeUdpDriver} from '../drivers/broadcast';

run(Settings, {
    dom: makeDOMDriver(`#app`),
    wireless$: makeUdpDriver(BOAT_HOST, BOAT_PORT),
});

开发者ID:LakeMaps，项目名称:hangashore，代码行数:11，代码来源:settings.ts

注：本文中的@cycle/dom.makeDOMDriver函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。