Question

当有人点击我打算用作某个元素的不透明度的按钮时，我启动了一个计时器。当我使用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,
  }
}

更新：原来在hyperscript中出现一个小错误导致了它的奇怪行为。我甚至没有将它包括在我的例子中，因为我认为它不相关。

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

只需将上述内容更改为（添加课程表示）

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

造成一切神奇的工作。

Answer 1

这可能不是一个完整的答案，但它有助于识别问题。我删除了视图代码生成的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,
  }
}

Rx定时器状态在Cycle.js中未在视图中更新

1 个答案: