如何在 cycle js 中从 JSON 数组创建组件

Question

给定来自 Cycle js 网站的标签滑块组件示例。我将如何获取滑块信息对象的 JSON 数组并为数组中的每个对象创建一个带标签的滑块组件。例如，如果我有一个这样的数组

let labelSliderArray =
[
   {
    label: 'Height',
    unit: 'in',
    min: 40,
    max: 84,
    init: 50
  },
  {
    label: 'Weight',
    unit: 'ibs',
    min: 40,
    max: 84,
    init: 50
  },

   {
    label: 'Age',
    unit: 'years',
    min: 10,
    max:  65,
    init: 20
  }

]

我如何将每个标签对象映射到标签组件。我试图将每个标签对象映射到 IsolatedLabeledSlider，例如 so

const {div, input, label, h2, makeDOMDriver} = CycleDOM;
const isolate = CycleIsolate;


function intent(DOM){

  return DOM.select('.slider').events('input')
    .map(ev => ev.target.value);
 };

function model(action$, props$){

   const intialValue$ = props$.map(props => props.init).first();
   const value$ = intialValue$.concat(action$)

   const state$ = Rx.Observable.combineLatest(value$, props$, 
    (value,props) => {
      return {
        label: props.label,
        unit: props.unit,
        min: props.min,
        max: props.max,
        value: value
      }
    }

   );

   return state$
};

function view(state$){
 return  state$.map( state =>
      div('.labled-slider',
          [
            label('.label', `${state.label}: ${state.value} ${state.unit}`),
            input('.slider', {type: 'range', min: state.min, max: state.max, valeu : state.value})
          ]
      )
    )
};

function LabeledSlider(sources) {
  const change$ = intent(sources.DOM);
  const state$  = model(change$, sources.props)
  const vtree$  = view(state$)
  return {
    DOM: vtree$
  };
};


const IsolatedLabelSlider = function (sources){
  return isolate(LabeledSlider)(sources)
}

function main(sources){

let labelSliderArray =  Rx.Observable.from(
[
   {
    label: 'Height',
    unit: 'in',
    min: 40,
    max: 84,
    init: 50
  },
  {
    label: 'Weight',
    unit: 'ibs',
    min: 40,
    max: 84,
    init: 50
  },

   {
    label: 'Age',
    unit: 'years',
    min: 10,
    max:  65,
    init: 20
  }

]);
let labelSinks = labelSliderArray.map(sProps => IsolatedLabelSlider({DOM: sources.DOM,  props:  Rx.Observable.of(sProps)}) )
let labelVtree$ = labelSinks.map(l => l.DOM)

 return  {
   DOM: labelVtree$
 };
}

const drivers = {
  DOM: makeDOMDriver('#app')
}

Cycle.run(main, drivers);

但这失败了，它只渲染了数组中的最后一个对象任何帮助都会很棒

这是来自 Cycle JS 网站的 example

Answer 1

从 Cycle.js example 开始，重点放在 main 函数上，这里进行了重新设计以适应源自数组的滑块控件和值：

function main(sources) {

  let labeledSliderArray = [
    {label: 'Weight', unit: 'kg',    min: 40,  max: 150, init: 70},
    {label: 'Height', unit: 'cm',    min: 140, max: 220, init: 170},
    {label: 'Age',    unit: 'years', min: 10,  max: 80,  init: 20}
  ];

  vtrees = labeledSliderArray.map(function (item) {
    const itemProps$ = Rx.Observable.of(item);  
    const itemSinks = IsolatedLabeledSlider({
      DOM: sources.DOM, props: itemProps$
    });
    return itemSinks.DOM;
  });

  const vtree$ = Rx.Observable.combineLatest(
    vtrees, (...vtreeargs) =>
      div(vtreeargs)
  );

  return {
    DOM: vtree$
  };
}

labeledSliderArray 被映射，在该循环中 *Props$、*Sinks 和 *VTree$ 被泛化，然后将结果数组提供给 combineLatest.接下来，es6 "rest parameters" 运算符用于将生成的 vtree 列表提供给构成最终 vtree$ 反应流的超脚本 div 函数。

JSBin Demo

如何在 cycle js 中从 JSON 数组创建组件

How to create components from a JSON array in cycle js

javascript

json

asynchronous

rxjs

cyclejs