Question

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

127.0.0.1 mycustomhostname.service

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

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
  }

]

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

以下是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列表提供给构成最终div反应流的超文本vtree$函数。

JSBin Demo

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

1 个答案: