使用组件

我们写好了 滑块组件，那么如何使用它呢？首先要知道，在 Cycle.js 中， main 只是一个名字，我们可以将它重命名为我们的组件名字 LabeledSlider，然后就可以在别的 main() 中使用该组件：

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

function main(sources) {
  return LabeledSlider(sources);
}

const drivers = {
  DOM: makeDOMDriver('#app'),
  props: () => Rx.Observable.of({
    label: 'Height',
    unit: 'cm',
    min: 140,
    max: 220,
    init: 170
  })
};

Cycle.run(main, drivers);

现在还有一点不优雅的是，我们在 main 所需要的 drivers 中耦合了 LabeledSlider 需要的属性。更正确的做法是，我们在 main() 中声明 LabeledSlider 需要的属性：

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

function main(sources) {
  const props$ = Rx.Observable.of({
    label: 'Height',
    unit: 'cm',
    min: 140,
    max: 220,
    init: 170
  });
  return LabeledSlider({
    DOM: sources.DOM,
    props: props$
  });
}

const drivers = {
  DOM: makeDOMDriver('#app'),
  props: () => Rx.Observable.of({
    label: 'Height',
    unit: 'cm',
    min: 140,
    max: 220,
    init: 170
  })
};

Cycle.run(main, drivers);

查看示例