2

初心者として、 Cycle.jsで 3 つの項目を含むリストを作成しようとしています。しかし、コードにはバグがあります。私はjsbinを作成し、以下にもコードを配置しました

http://jsbin.com/labonut/10/edit?js,output

問題：最後のチェックボックスをクリックすると、新しいチェックボックスが追加され（これは望ましくありませんでした）、古いチェックボックスは「オン/オフ」ラベルを変更しません。また、最後のものを除いて、まったく反応しません。私は何を間違っていますか？

const xs = xstream.default;
const {div, span, input, label, makeDOMDriver} = CycleDOM;

function List(sources) {

  sources.DOM
  var vdom$ = xs.fromArray([
    {text: 'Hi'},
    {text: 'My'},
    {text: 'Ho'}
  ])
    .map(x => isolate(ListItem)({Props: xs.of(x), DOM: sources.DOM}))
    .map(x => x.DOM)
    .flatten()
    .fold((x, y) => x.concat([y]), [])
    .map(x => div('.list', x));

  return {
    DOM: vdom$
  }
}

function ListItem(sources) {
  const domSource = sources.DOM;
  const props$ = sources.Props;

  var newValue$ = domSource
    .select('.checker')
    .events('change')
    .map(ev => ev.target.checked);

  var state$ = props$
    .map(props => newValue$
      .map(val => ({
        checked: val,
        text: props.text
      }))
      .startWith(props)
    )
    .flatten();

  var vdom$ = state$
      .map(state => div('.listItem',[
        input('.checker',{attrs: {type: 'checkbox', id: 'toggle'}}),
        label({attrs: {for: 'toggle'}}, state.text),
        " - ",
        span(state.checked ? 'ON' : 'off')
      ]));
  return {
    DOM: vdom$
  }
}


Cycle.run(List, {
  DOM: makeDOMDriver('#app')
});
4

2 に答える 2

3

少し短いバリアント。

1 行目で、Items Dom ストリーム配列を取得します。

2行目、次にストリームを1つのストリームに結合し、要素を親divにラップします

function List(sources) {

  var props = [
    {text: 'Hi'},
    {text: 'My'},
    {text: 'Ho'}
  ];

  var items = props.map(x => isolate(ListItem)({Props: xs.of(x), DOM: sources.DOM}).DOM);

  var vdom$ = xs.combine(...items).map(x => div('.list', x));

  return {
    DOM: vdom$
  }
}
于 2016-07-26T17:28:05.740 に答える
1

ウラジミールの答えに触発されたのは、彼の答えの「古い学校」のバリエーションと、私の元の答えの改善です。

function List(sources) {

  const props = [
    {text: 'Hi'},
    {text: 'My'},
    {text: 'Ho'}
  ];

  var items = props.map(x => isolate(ListItem)({Props: xs.of(x), DOM: sources.DOM}).DOM);

  const vdom$ = xs.combine.apply(null, items)
    .map(x => div('.list', x));

  return {
    DOM: vdom$
  };
}

古い学校の JSBin デモ

（元の回答。）

問題はあなたのList機能にあるようです。率直に言って、理由はわかりませんが、別の解決策を見つけました。

function List(sources) {

  const props = [
    {text: 'Hi'},
    {text: 'My'},
    {text: 'Ho'}
  ];

  function isolateList (props) {
    return props.reduce(function (prev, prop) {
      return prev.concat(isolate(ListItem)({Props: xs.of(prop), DOM: sources.DOM}).DOM);
    }, []);
  }

  const vdom$ = xs.combine.apply(null, isolateList(props))
    .map(x => div('.list', x));

  return {
    DOM: vdom$
  };
}

JSBin デモ

propsここでの違いの 1 つは、オブジェクト内のアイテムをストリーミングしていないことです。むしろreduce、リスト アイテム vdom ストリームの配列への props である関数に配列を渡し、applyその配列をxstream combineファクトリに渡します。

于 2016-07-26T05:30:36.963 に答える