使用Cycle.js,我正在尝试创建一个视图,在给定一组数据点时呈现动态数量的组件。但是,我无法弄清楚如何创建重复的视图。
我已经将所有内容都删回了我认为应该如何工作的最基本的例子。希望有人可以指出我所缺少的东西。
/*
Expected:
Given an array of data objects, create the following DOM
<div class="container">
<h1 class=".data">Element 1</h1>
<h1 class=".data">Element 2</h1>
<h1 class=".data">Element 3</h1>
<h1 class=".data">Element 4</h1>
...
</div>
Result:
<div class="container">
<h1 class=".data">Element 9</h1>
</div>
*/
function view( data$ ){
return Rx.Observable.of(
div('.container', data$.map( data =>
h1('.data', `Element: ${ data.id }`)
))
);
}
function main( sources ) {
// Create an array of objects
const arr = [];
for( let i = 0; i < 10; i++ ){
arr.push({
id: `id ${i}`
})
}
// Convert array to an observable
const data$ = Rx.Observable.from(arr);
const vtree$ = view( data$ );
return {
DOM: vtree$
};
}
const drivers = {
DOM: CycleDOM.makeDOMDriver('#mountPoint')
};
Cycle.run( main, drivers );
答案 0 :(得分:6)
您的数组有10个项目,因此observable将发出10个项目。 Observable表示随时间变化的数据。所以你的观察代表了10个时间点。其中只使用最新的。这就是为什么你只看到“元素9”。
您可能希望创建一个只包含一个项目的observable,而不是将数组转换为observable:您是数组。
将Rx.Observable.from(arr)
更改为Rx.Observable.just(arr)
下一个问题是你的观点功能:
function view( data$ ){
return Rx.Observable.of(
div('.container', data$.map( data =>
h1('.data', `Element: ${ data.id }`)
))
);
}
您的视图函数采用data$
参数。请将data$
改为data stream
或stream of data
。所以你的函数需要一个流
到目前为止,这是正确的。
但现在您正在通过Observable.of
创建一个新的Observable。这不是你想要做的。相反,您可能只想将data$
(即数据流)转换为虚拟DOM节点流:
function view( data$ ){
return data$.map( data =>
// here you should return a virtual DOM node
)
}
请记住:data$
是您的数据。对于每个时间点,您都有一些数据。并且对于每个时间点,您都希望拥有一些DOM树。
function view( data$ ){
return data$.map( data =>
div('.container',
// data is not a single of your items but the whole array of items
// hence we can map over it and transform each item into a child nod:
data.map((item) => div('.item', item.id))
)
)
}
注意:data$.map
与data.map非常不同。第一个变换/映射一个可观察的,后一个变换/映射一个经典的数组。
加成:
for( let i = 0; i < 10; i++ ){
arr.push({
id: `id ${i}`
})
}
您正在以程序方式创建阵列。您可能更喜欢创建大小为10的数组并将其转换为包含项目的数组的功能方法:
Array.apply(Array, {length: 10}).map(
(_,index) => ({id: `id: ${index}`})
)
答案 1 :(得分:0)
Cycle有一个Collection模块。它需要一组对象数组并将它们隔离开来。我用npm获取这些模块并使用webpack进行部署。
import Cycle from '@cycle/xstream-run';
import Collection from '@cycle/collection';
import {div,h1} from '@cycle/dom';
import { makeDOMDriver } from '@cycle/dom';
import xs from 'xstream';
function view( comb$ ){
return comb$.debug('view').map( tup =>{
const item = tup[0];
const clicked = tup[1];
return div('.container', [ h1( '.data', `Element: ${item.id} clicked: ${clicked}`)]);
});
}
/* Item Component */
function Item ( sources ){
const intent$ = sources.DOM //Events on DOM are limited to only ones on sink DOM
.select('div')
.events('click').mapTo('yes').startWith('no').debug('item clicks');
return {
DOM: view( xs.combine( sources.itemJaJa, intent$) )
};
}
function main(sources) {
const arr = [];
for( let i = 0; i < 10; i++ ){
arr.push(
//The way Collection add the obj to the source is odd
//this is what's worked for me
{ id_to_collection: i, //identifier used by collection
itemJaJa:{
id: `id ${i}`
}
} );
}
const items = Collection.gather(Item, sources, xs.of( arr),'id_to_collection' );
const vtrees$ = Collection.pluck( items, item=>item.DOM);
return {
DOM: vtrees$.map( itemDomList => div('.top',itemDomList)),
};
}
const drivers ={
DOM: makeDOMDriver('#app')
};
Cycle.run(main, drivers);
&#13;