DOM加载到cycle.js后如何执行javascript

Question

DOM加载到cycle.js后如何执行javascript？我不能把它放在我的 main() 中，因为那时 DOM 还没有加载。对于上下文，我基本上是在尝试初始化一个花哨的自动完成功能，它需要目标 DOM 元素存在，如果我的方法有误，请随时指点。

我试过这个：

sources.DOM.select(':root')
  .observable.take(1)
  .subscribe((element) => initAutoCompl())

...但是 select 正在返回 null，我也尝试针对其他元素进行选择。

Answer 1

在 DOM 准备好后执行一次 JS 代码的一种方法（使用 CycleJS with xstream）是运行一个（否则）non-operative observable。为此 select ':root' 然后分配一个 non-existent 事件，并使用 startWith 启动流。流启动后运行一个 map 将执行您的设置功能。要订阅 observable，请将其发送给 non-operative 驱动程序：

function main (sources) {

  // Initiate observable, run setup function
  const noop$ = sources.DOM.select(':root').events('noop')
    .startWith(1).map(noop => runSetup())

...

  return {
    DOM: vdom$,
    noop: noop$
  }
}

...

Cycle.run(main, {
  DOM: makeDOMDriver('#app'),

  // non-operative driver
  noop: noop$ => { noop$.addListener(
    {next: noop => {}, error: ()=>{}, complete: ()=>{}}
  ) }
})

Codepen.io Run Setup example

另一种方法是运行驱动程序中的设置脚本并使用 of 可观察对象触发它。

function main (sources) {

  // trigger observable
  const setup$ = xs.of(1)

...

  return {
    DOM: vdom$,
    setup: setup$
  }
}

Cycle.run(main, {
  DOM: makeDOMDriver('#app'),

  // setup driver
  setup: setup$ => { setup$.addListener({next: setup => {
    // setup code goes here
    console.log('run setup: ', document.querySelector('#app').children.length)
  }, error: ()=>{}, complete: ()=>{}}) }
})

Codepen.io Setup Driver example.

如果在创建 DOM 元素之前需要用户输入：

function main (sources) {

  const click$ = sources.DOM.select('div#clickme').events('click')
  const vdom$ = click$
    .mapTo(div('#newDomElement',"I'm new."))
    .startWith(div('#clickme','Click me.'))

  return {
    DOM: vdom$,
    setup: click$
  }
}

Cycle.run(main, {
  DOM: makeDOMDriver('#app'),
  setup: setup$ => { setup$.addListener({next: setup => {
    // setup code goes here
    initAutoComplDummy()
  }, error: ()=>{}, complete: ()=>{}}) }
})

Codepen.io Setup Driver After User Input example

Answer 2

我实际上问错了我的问题，因为当我实施我的解决方案时，我意识到自动完成不在第一页上，所以 bloodyKnuckles 解决方案虽然正确回答了问题，但没有解决我的问题。

下面是如何在 cycle.js

中的 DOM 上呈现任意项目后运行 javascript

在你的主

里面

 const elementId$ = sources.DOM.elements().filter(c => (document.getElementById('myRenderedElementId') !== null)).filter(c => c).take(1).map(c => {
       // run custom javascript
    });

    elementId$.addListener({
        next: function (value) {
        },
        error: function (err) {
            alert('err: ' + name + ' ' + err);
        },
        complete: function () {
        }
    });

DOM加载到cycle.js后如何执行javascript

How to execute javascript after DOM is loaded in cycle.js

javascript

functional-programming

reactive-programming

cyclejs