Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
Kevin
@kevinkleine
but Raoul from Spain has nested YOUR login component INSIDE my pricing component
ow Raoul, what are you doing
Laszlo Korte
@laszlokorte
it will still work correctly
Kevin
@kevinkleine
and your component ALSO uses button.submit
ok
so: if a visitors clicks the submit button in YOUR login component, MY pricing table will not receive a click event?
Laszlo Korte
@laszlokorte
yes
Kevin
@kevinkleine
yes, it will not receive a click event?
Laszlo Korte
@laszlokorte
it will not receive
Kevin
@kevinkleine
got it
Laszlo Korte
@laszlokorte
the case I was describing is: Raoul puts the login form INSIDE your button - not somewhere in your columns - but INSIDE YOUR BUTTON. So you have a form inside a button.
Kevin
@kevinkleine
ah
that would be weird
Laszlo Korte
@laszlokorte
if now someone clicks the login button, your outer button will also receive the event, because it bubbles up - not matter what the class names are
Kevin
@kevinkleine
makes sense
so, the lib handling the event binding, binds it within the scope of the component
Laszlo Korte
@laszlokorte
yes
Matti Lankinen
@milankinen
just to make sure if I understood right:
function Foo() {
  return {
    DOM: O.just(h("button.foo", "..."))
  }
}

function Bar(sources) {
  const click$ = DOM.select(".foo").events("click")

  const foo = isolate(Foo, "f1")(sources)
  const vdom$ = foo.DOM.map(...)
  return {
    DOM: vdom$
  }
}
when user clicks button.foo, does that emit events to click$?
Laszlo Korte
@laszlokorte
@milankinen It wont
Matti Lankinen
@milankinen
so the events bubble up to Bar even though isolation is being used?
...or not?
Laszlo Korte
@laszlokorte
click$ will not see the event because Bar has not element matching ".foo"
Matti Lankinen
@milankinen
cool! now I got it, thanks
Laszlo Korte
@laszlokorte
but if you do:
function Foo() {
  return {
    DOM: O.just(h("button.foo", "..."))
  }
}

function Bar(sources) {
  const click$ = DOM.select(".foo").events("click")
  const click2$ = DOM.select(".bar").events("click")

  const foo = isolate(Foo, "f1")(sources)
  const vdom$ = foo.DOM.map((foo) => div('.bar',[
      foo,
  ]))
  return {
    DOM: vdom$
  }
}
click2$ will see the event that happens when the user clicks button.foo
Matti Lankinen
@milankinen
yes, that's correct
Laszlo Korte
@laszlokorte
because the button is inside .bar and it bubbles all the way up
Matti Lankinen
@milankinen
have to make a GH issue... :smile:
Kevin
@kevinkleine
omg I CONTRIBUTED
(a little bit, I know, but still :))
Matti Lankinen
@milankinen
Now I just have to figure out how to do that efficiently...
Kevin
@kevinkleine
IMHO you wouldn't need an 'isolate' function
*have to use
Matti Lankinen
@milankinen
no it's not necessary
Kevin
@kevinkleine
like, wouldn't it be better if isolation were the default?
ie
const myButton = button( ".henk", "click me" )
myButton.click => handler
Laszlo Korte
@laszlokorte
@kevinkleine there is a very long issue in the cycle repo discussion that. Afaik tsers doesn't have (~need) isolate anyway
Kevin
@kevinkleine
or DOM.select( myButton, 'click' ) => ...
Laszlo Korte
@laszlokorte
@kevinkleine are you talking about tsers or cycle?
Kevin
@kevinkleine
general principle
doesn't apply to tsers?
Laszlo Korte
@laszlokorte
it does not actually apply to either one. In cycle you want to be able to get events streams even before the vnodes are generated so you have no access to myButton at that point
Matti Lankinen
@milankinen
here is the cycle's discussion thread: cyclejs/core#259
Laszlo Korte
@laszlokorte
tsers aready does something like events(vtree$, '.foo', 'click') (so it has isolation by default)
Matti Lankinen
@milankinen
yes, because the events depend on vtree
however, like @laszlokorte pointed out, it doesn't filter events from child components (yet :smile: )
Kevin
@kevinkleine
that's not a long read at all
Matti Lankinen
@milankinen
tl;dr; cycle is not going to have click handlers (subjects) bound to vdom. and neither is tsers