javascript - Cycle.js 中的 Rx 计时器状态未在 View 中更新

Question

当有人单击我打算用作某些元素的不透明度的按钮时，我将启动计时器。当我使用 do 跟踪该值时，我可以看到它向控制台输出 40 次，但在 View 中该数字保持不变。不知道我哪里出错了:

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` ])

让一切都神奇地发挥作用。

Answer 1

这可能不是完整的答案，但它有助于识别问题。我删除了 View 代码生成的 If 部分，并添加了 repeat，将其放入 tricycle 中。您可以看到 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,
  }
}