CycleJSで動的に要素を作成

Question

私はいくつかのCycleJSを習得しようとしていますが、これで何をするのか分からなくなってしまいました。目標は、手動で宣言するのではなく、設定を介して入力を作成することです。問題は、配列の入力のうち、最後のものだけでなく、両方をレンダリングすることです。

Main.js

const sliderGunProps$ = xs.of({ 
    value: 30, 
    id: 'gun' 
}); 

const sliderCannonProps$ = xs.of({ 
    value: 70, 
    id: 'cannon' 
}); 

const propsConfig = [sliderGunProps$, sliderCannonProps$]; 

function view$(state$) { 
    return xs.fromArray(state$) 
    .map(state => { 
     return xs.combine(state.sliderVDom$, state.values) 
     .map(([sliderVDom, value]) => 
      div([sliderVDom, h1(value)]) 
    ); 
    }) 
    .flatten(); 
} 

function model(actions$) { 
    return actions$.map((action) => { 
    const sliderVDom$ = action.DOM; 
    const sliderValue$ = action.value; 

    const values$ = sliderValue$.map(val => val); 

    return { 
     sliderVDom$: sliderVDom$, 
     values: values$ 
    }; 
    }); 
} 

function intent(sources) { 
    return propsConfig.map(prop$ => Slider({ 
    DOM: sources.DOM, 
    props$: prop$ 
    })); 
} 

function main(sources) { 
    const actions$ = intent(sources); 

    const state$ = model(actions$); 

    const vdom$ = view$(state$); 

    const sink = { 
    DOM: vdom$ 
    }; 

    return sink; 
} 

ありがとう：！アイムエラーがビュー$にあり、この方法を私はstream.My素朴な実装を扱っていていると仮定します

Answer 1

私はそれを解決する方法を考え出しました。ポイントは、私がストリームをどのように扱うかを理解していないということでした。適切なコード：

function total(values) { 
    return xs.combine(...values) 
    .map(val => val.reduce((acc, x) => acc + x)); 
} 

function view$(state$) { 
    const DOMElements = state$.map(slider => slider.sliderVDom$); 
    const values = state$.map(slider => slider.values); 
    const totalValue$ = total(values); 

    return xs.combine(totalValue$, ...DOMElements) 
    .map(([totalValue, ...elements]) => (
     div([ 
     ...elements, 
     h1(totalValue) 
     ]) 
    )); 
} 

function model(actions$) { 
    return actions$.map((action) => ({ 
    sliderVDom$: action.DOM, 
    values: action.value.map(val => val) 
    })); 
} 

function intent(sources) { 
    return propsConfig.map(prop$ => Slider({ 
    DOM: sources.DOM, 
    props$: prop$ 
    })); 
}