[Cycle.js] Fine-grained control over the DOM Source
function main(sources) {
const click$ = sources.DOM;
const sinks = {
DOM: click$
.startWith(null)
.flatMapLatest(() =>
Rx.Observable.timer(0, 1000)
//describe what element should exist
.map(i => {
return {
tagName: 'h1',
children: [
{
tagName: 'span',
children: [
`time esplsed: ${i}`
]
}
]
}
})
),
Log: Rx.Observable.timer(0, 2000).map(i => 2*i),
};
return sinks;
}
What if we want to change it to mouse event? we need to somehow modiy the DOMSource it return from:
function DOMDriver(obj$) {
function createElement(obj) {
const element = document.createElement(obj.tagName);
obj.children
.filter(c => typeof c === 'object')
// if it is object, then we need to create another element
.map(createElement)
.forEach(c => element.appendChild(c));
obj.children
.filter(c => typeof c === 'string')
.forEach(c => element.innerHTML += c);
return element;
}
obj$.subscribe(obj => {
const container = document.querySelector('#app');
container.innerHTML = '';
const element = createElement(obj);
container.appendChild(element);
});
const DOMSource = Rx.Observable.fromEvent(document, 'click');
return DOMSource;
}
So for main() function, we need to call a function able to manage the tagName and eventType:
const mouseover$ = sources.DOM.selectEvents('span', 'mouseover');
And for the DomDirver, we need add a function which enable user to pass down element and eventType:
const DOMSource = {
selectEvents: function(tagName, eventName){
return Rx.Observable.fromEvent(document, eventName);
}
};
-------------------------
Code:
// Logic (functional)
function main(sources) {
const mouseover$ = sources.DOM.selectEvents('span', 'mouseover');
const sinks = {
DOM: mouseover$
.startWith(null)
.flatMapLatest(() =>
Rx.Observable.timer(0, 1000)
//describe what element should exist
.map(i => {
return {
tagName: 'h1',
children: [
{
tagName: 'span',
children: [
`time esplsed: ${i}`
]
}
]
}
})
),
Log: Rx.Observable.timer(0, 2000).map(i => 2*i),
};
return sinks;
}
// source: input (read) effects
// sink: output (write) effects
// Effects (imperative)
function DOMDriver(obj$) {
function createElement(obj) {
const element = document.createElement(obj.tagName);
obj.children
.filter(c => typeof c === 'object')
// if it is object, then we need to create another element
.map(createElement)
.forEach(c => element.appendChild(c));
obj.children
.filter(c => typeof c === 'string')
.forEach(c => element.innerHTML += c);
return element;
}
obj$.subscribe(obj => {
const container = document.querySelector('#app');
container.innerHTML = '';
const element = createElement(obj);
container.appendChild(element);
});
const DOMSource = {
selectEvents: function(tagName, eventName){
return Rx.Observable.fromEvent(document, eventName);
}
};
return DOMSource;
}
function consoleLogDriver(msg$) {
msg$.subscribe(msg => console.log(msg));
}
const drivers = {
DOM: DOMDriver,
Log: consoleLogDriver,
}
Cycle.run(main, drivers);
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.