2

给定来自 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，就像这样

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 网站的示例

4

1 回答 1

1

从Cycle.js 示例开始，并专注于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 演示

于 2016-05-12T15:44:00.047 回答