Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Split a Request into Data Stream and an Image Stream with RxJS and Vue.js

    John LindquistJohn Lindquist

    A single stream can branch off into many different streams based on how you need to handle each piece of information. This lesson shows how you take the data request and split it into a name$ stream and an image$ stream so that we can handle the image loading separately.

    vueVue.js
    ^2.0.0
    rxjsRxJS
    ^5.0.0
    javascriptJavaScript
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 we'll make this a bit more interesting by loading an image. Instead of plucking the data and name, let's pluck the data. We'll call this "Person," and change this to Person. Then, we can create a name stream. I'll say constName is Luke pluck name, an image stream which can be Luke.pluck image.

    00:27 We'll return both of those. We'll return name at image, and then render both of them out inside of our template. We'll render out the name. For right now, we'll render out image right here to check that it's working. I'll click, and you'll see Luke. You'll see this image name. Let's go ahead and drop that inside of an image tag.

    00:49 We'll bind the source to image. The image actually is on the remote server. I'm going to have to map this image to the URL where it is, so starwars.egghead.training/, and then image. Hit Save there. Now when I click, it'll load in Luke and load in the image...

    Discuss

    Discuss