0

ある要素の不透明度として使用するボタンを誰かがクリックすると、タイマーが開始されます。値をトレースするために使用doすると、値がコンソールに 40 回吐き出されていることがわかりますが、ビューでは数値が表示されたままです。ここでどこが間違っているのかわかりません：

let intent = ({ DOM }) => ({
  clickLogin$: DOM.select('.sign-in').events('click').map(ev => true)
})

let model = ({ clickLogin$ }) =>
  Rx.Observable.combineLatest(
    clickLogin$.startWith(false),
    clickLogin$.map(x =>
      Rx.Observable.timer(1, 1)
    ).switch().startWith(0).take(40),
    (signingIn, fadeValue) => ({ signingIn, fadeValue })
  )

let view = (state$) => {
  return state$.do(
    x => console.log(x.fadeValue)) // this fires |--1-2-3-4-5-6-7-8-->
  .map(({ signingIn, fadeValue }) =>
    div(`.app`, [
      div([fadeValue]), // this value does not change
      If(signingIn,
        div(`.overlay`, {
          style: {
            backgroundColor: `rgba(0, 0, 0, 0.${fadeValue})` // nor does this
          }  
        })
      )
    ])
  )  
}

let main = (sources) => {
  let view$ = view(model(intent(sources)))
  return {
    DOM: view$,
    history: sources.History,
    Props: sources.Props,
  }
}

更新:ハイパースクリプトに小さなエラーがあると、奇妙な動作が発生することが判明しました。関連性があるとは思わなかったので、例には含めませんでした。

div(`content`, [ `testing` ])

上記を単純に（クラスの表示を追加）に変更する

div(`.content`, [ `testing` ])

すべてが魔法のように機能するようにしました。

4

1 に答える 1

1

これはおそらく完全な答えではありませんが、問題の特定に役立ちます。ビューのコード生成の部分を削除しIf、 を追加し、それを三輪車repeatに入れると、期待どおりに が順次生成されていることがわかります。fadeValue

var Cycle = require('@cycle/core');
var CycleDOM = require('@cycle/dom');
var Rx = require('rx');
var makeDOMDriver = CycleDOM.makeDOMDriver;
var div = CycleDOM.div;

var sources = {
  DOM: makeDOMDriver('.app')
};

let main = (sources) => {

let intent = ({ DOM }) => ({
  clickLogin$: Rx.Observable.interval(3000).take(5).share()
})

let model = ({ clickLogin$ }) =>
  Rx.Observable.combineLatest(
    clickLogin$.startWith(false),
    clickLogin$.flatMapLatest(function (x) {
      return Rx.Observable.timer(200, 200);
    }).take(10).repeat(),
    (signingIn, fadeValue) => ({ signingIn, fadeValue })
  )

let view = (state$) => {
  return state$.do(
    x => console.log(x.fadeValue)) // this fires |--1-2-3-4-5-6-7-8-->
  .map(({ signingIn, fadeValue }) =>
    div(`.app`, [
      div([fadeValue]) // this value does not change
    ])
  )  
}

  let view$ = view(model(intent(sources)))
  return {
    DOM: view$,
    history: sources.History,
    Props: sources.Props,
  }
}
于 2016-01-25T13:33:28.467 に答える