Ready to get started?

Join Adocasts Plus for $8.00/mo or sign into your account to get access to all of our lessons.

robot mascot smiling

Serializing Props as Element Attributes

In this lesson, we'll learn about EdgeJS' serialize only and serialize except utility methods, which allow us to directly serialize key-value pairs from our props as element attributes within our components.

Published
Nov 06, 23
Duration
1m 53s

Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.

Adocasts

Burlington, KY

So now there's one last nugget of information that we should cover about props, and that's a utility that EdgeJS comes with called SerializeExcept and SerializeOnly. These utilities allow us to set and serialize props as direct attributes on elements.

Let's take a closer look at how they work.

Attribute Serialization

Within our app layout, let's say we have our main content wrapped in a <main> element, and we want to transfer all the props to this element's attributes, except for the "title" prop. Thanks to these utilities, we can easily achieve this by…

  1. Inside the component's template, use double curly braces to access the $props object.

  2. Then, use the $props.serializeExcept(['title']) directive to specify which prop to exclude from serialization, in this case, "title."

Ready to get started?

Join Adocasts Plus for $8.00/mo or sign into your account to get access to all of our lessons.

Join The Discussion! (2 Comments)

Please sign in or sign up for free to join in on the dicussion.

  1. Commented 2 months ago

    For v6, looks like serializeOnly and serializeExcept have been replaced with onlyand except plus toAttrs. Details here: https://edgejs.dev/docs/components/props

    1

    Please sign in or sign up for free to reply

    1. Commented 2 months ago

      Yeah, I need to add a way to tag these series to specific versions! Though the process is still the same, the syntax for this series is using EdgeJS & AdonisJS 5. If you're curious, you can find the full list of differences between EdgeJS 5 vs 6 here:

      https://edgejs.dev/docs/changelog/upgrading-to-v6

      1

      Please sign in or sign up for free to reply