vue-observable (rx) 2.0 observations about vue-rx HOT 12 CLOSED

@maple-leaf that's a valid issue! I think it's still possible to somehow hook up the template (and especially template-only variables like v-for iterators) with an observable source.

Maybe something like this? (rough idea)

<ul>
  <li v-for="item in list" @click="$toStream('itemClicks', item)"></li>
</ul>

subscriptions () {
  return {
    itemClicks: this.$fromStream('itemClicks').do(item => console.log(item))
  }
}

from vue-rx.

Hi Evan, just back from rehearsal and glad I looked at your changes before completing my reply. Looking at the changes to the vue-rx plugin and examples I'm already impressed! Really like how you defined fromDOMEvent on the prototype, no need to wrap any RxJS operator there. It is also better for supporting alternate stream libraries 👍

The one thing that would be useful in some use cases is allowing more than one event type to be specified in the args, maybe something like fromDOMEvent('selector', ['click', 'pointermove', 'etc']). Then the stream of event types could be further filtered by RxJS or alt library operators.

Oh yeah, I added a pointer-event there because they are awesome and there was just a robust implementation of them in Vue made here: https://benjaminlistwon.com/blog/strategies-for-extending-vue

Initially I had been thinking of a directive approach that would look like this <div id="canvas" v-stream:event-type="method-name">. However, your fromDOMEvent solution is better 💯

I think the new subscriptions option is going to become very useful. It's already doing all the intent and model aspects that Cyclejs likes to do and there can be so much more. I'll keep exploring and applying use cases to subscriptions and let you know how that goes. I'll start with these constructs: https://egghead.io/courses/rxjs-subjects-and-multicasting-operators :-)

from vue-rx.

Depending on the outcome of issue #33 maybe this issue can be closed?

from vue-rx.

Sorry for missing your issue - I think I just didn't quite understand what you wanted at first glance. Do you have an example of what your desired usage would be like?

from vue-rx.

About this , I think there is a downside of fromDOMEvent. That's take a look of this code:

<ul><li v-for="item in list" @click="doSomeThing(item)"></li></ul>

Normally, just normal doSomeThing function should be ok, but if we want do some debounce or some async , Rx.js way would be best way here. How to deal with this with fromDOMEvent ?

from vue-rx.

Having event sources from both fromDOMEvent in the subscription option and the template itself would cover pretty well all use cases. Stream and reactive loving devs will be in heaven!

from vue-rx.

How about do the stream transforming with a modifier?

<ul>
  <li v-for="item in list" @click.event-stream="itemClicks(item)"></li>
</ul>

And the modifier will create a event-stream called 'itemClicks' in $eventStream. And we can use it like this:

this.$eventStream.itemClicks.subscribe(item => console.log(item));
this.$eventStream.itemClicks.subscribe(({ item, rest } => console.log(item, rest));

This will not going to break current @click usage, you just need a modifier if stream desired and remove it while stream is overhead.

And all event stream is in $eventStream, vue-rx can easily unsubscribe them when needed.

from vue-rx.

Have two alternatives here, the first still binding stream handling to the subscriptions option, while the later allowing the subscribe to happen anywhere. Both techniques are useful.

from vue-rx.

Hey, @zoomclub
I dont't think $fromDOMEvent(selector,event) is good enough either.

@yyx990803 , I build a directive v-ob:click="click$", but the sourcecode are not elegant (view-model dirty hack). Any help?

example

code

from vue-rx.

@regou Nice, just a few points.

• It would be useful to be able to chain event types together to capture them all in the observable, like v-ob:mouseover.mousemove.mouseup="myMice$".

• Why not call the directive v-stream, reflecting that it is also useful with any stream library? Maybe the abbreviated form could also be $ instead of the usual @.

• Noticed the subscribe is now in mounted and not in it's own subscription object. Seems okay to use observables and make subscriptions anywhere 👍

from vue-rx.

@zoomclub

• Keep it simple, users can just Observable.merge them
• ok
• This is the main issue: directive's bind happens after component's created lifecycal, but subscription defined in create(See sourcecode mixin), which means unable to access vm.myMice$ in subscriptions

from vue-rx.

To celebrate the resolution of this issue and the release of vue-rx 3.0 I'm closing this issue 🍾

from vue-rx.