本文整理汇总了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() { },
});
}示例2: run
import main from './main';
import { run } from '@cycle/xstream-run';
import { makeDOMDriver } from '@cycle/dom';
run(main, {
dom: makeDOMDriver('#app')
});示例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')
});
示例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')});
示例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
});
示例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()
});
示例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 {}
},
})
示例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);
示例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示例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),
});