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 回答