How to subscribe to events without DOM modifications in cyclejs (motorcyclejs)?

Question

How can i subscribe events from some DOM nodes if I do not want to produce changes in DOM? How can I achive something like this in cyclejs or motorcyclejs?

function main({DOM}) {
   DOM.select('button').events('click').forEach(e => console.log(e))
   return {}
}

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

updated: DOM tree already exits before running main function:

<div id="app">
  <button>Click</button>
</div>

The example above does not work, the event listener is not attached to DOM node.

What DOM node? You didn't create any DOM nodes to attach it to. — m59, Feb 04 '16 at 21:42
I fogrot to mention that button node already exist in DOM tree — mamciek, Feb 04 '16 at 21:43
I suspect that you're just not meant to prepopulate the root element with markup like that. I have a strong feeling that is a bad practice. Cycle is probably looking for something generated via virtual dom or has other logic than just calling `querySelector` on the root element. I'm not sure, though. — m59, Feb 04 '16 at 21:49
Your example actually works. http://codepen.io/harunhasdal/pen/reLdeb?editors=1011 — harun, Mar 11 '16 at 10:39

score 0 · Answer 1 · answered Feb 14 '16 at 00:44

Here this should demonstrate what your setup should look like if you wanted the ability to view your DOM clicks:

const view = () => {
  return div('app',[
    button('Click')
  ]);
};

const intent = ({DOM}) => {
  const intent$ = DOM.select('button').events('click').map(e => console.log(e));
  return intent$;
};

const main = (sources) => {
  const intent$ = intent(sources);
  const view$ = Rx.Observable.just(view);
  return {
    DOM: view$

  };
};

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

How to subscribe to events without DOM modifications in cyclejs (motorcyclejs)?

1 Answers1