Cookie Consent by Free Privacy Policy Generator 📌 Enhancing Asynchronous Data Fetching in Umbraco v14 with Lit Async Directives


✅ Enhancing Asynchronous Data Fetching in Umbraco v14 with Lit Async Directives


💡 Newskategorie: Programmierung
🔗 Quelle: dev.to

In Umbraco Commerce we have a number of interconnected models which pose a bit of a problem when it comes to rendering them for display in our markup for the new backoffice.

Fetching all of these models whenever just one of them is requested would be pretty wasteful. Instead, it would be great if the UI could easily request these connected models whenever it needed them.

This is where we can leverage Lit's async directives to do just that.

The Power of Lit Async Directives

Lit async directives provide a powerful way to manage asynchronous operations within your Lit templates. They allow you to create helper functions that fetch data and pass it to a HTML template once it's loaded.

Here's an example of such a helper used in Umbraco Commerce:

${withUcPaymentMethod(this, this.order.paymentInfo.paymentMethod.id, (paymentMethod) =>
    <div>
        <div>Payment via ${ paymentMethod.name }<div>
        <div>${this.order.paymentInfo.totalPrice.formatted}<div>
    </div>
)}

In this example, withUcPaymentMethod is an async directive. It fetches a payment method based on its ID, and once the data is loaded, it passes it to a template that renders the payment information.

Setting Up Lit

To use Lit async directives, you need to have a dependency on lit. Note that the version of lit exported by Umbraco doesn't contain the directive classes, so you'll need to install it separately:

npm install -S lit

Creating an Async Directive

Now, let's take a look at how we can create our own async directive:

import { AsyncDirective } from 'lit/async-directive.js';
import { noChange } from '@umbraco-cms/backoffice/external/lit';
import { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';

class WithUcPaymentMethodDirective extends AsyncDirective {

    render(host: UmbControllerHost, id: string, template:(model:any) => unknown)
    {
        new UcPaymentMethodRepository(host).get(id).then(resp => {
            this.setValue(template(resp.data));
        });

        return noChange;
    }
}

export const withUcPaymentMethod = directive(WithUcPaymentMethodDirective);

In this code, we define a new async directive called WithUcPaymentMethodDirective. This directive fetches a payment method based on its ID, and once the data is loaded, it calls this.setValue to update the template with the fetched data.

Handling Initial Render and Re-render

When the directive initially renders, it returns noChange. This means that the template won't be updated until the data is loaded. Once the fetch request promise resolves, this.setValue is called, passing in the rendered template which is in turn passed the returned model. This call triggers a re-render for this module with the updated content.

Caching Data

It's important to note that your repository should implement some kind of caching layer to ensure you aren't making a lot of requests. This will help improve the performance of your application and provide a better user experience.

In conclusion, Lit async directives provide a powerful and flexible way to manage asynchronous data fetching in your Lit applications. They allow you to keep your templates clean and easy to understand, while also ensuring that your data is loaded efficiently and effectively. Happy coding!

...

✅ Enhancing Asynchronous Data Fetching in Umbraco v14 with Lit Async Directives


📈 148.19 Punkte

✅ Reusing Umbraco Properties in Umbraco v14


📈 58.28 Punkte

✅ JerryScript 1.0 lit/lit-char-helpers.c lit_read_code_unit_from_hex memory corruption


📈 43 Punkte

✅ Sharkoon RGB Lit 100 & Lit 200: Hinter Frontglas warten Leuchtmuster


📈 43 Punkte

✅ JerryScript 1.0 lit/lit-char-helpers.c lit_read_code_unit_from_hex Pufferüberlauf


📈 43 Punkte

✅ Creating your own UI extension points in Umbraco v14 - Part 1: The Basics


📈 39.73 Punkte

✅ Simplifying Imports with TypeScript Path Aliases in Umbraco v14


📈 39.73 Punkte

✅ Early Adopter's guide to Umbraco v14 [Trees] - Backend c# code


📈 39.73 Punkte

✅ Early Adopter's guide to Umbraco v14 [Trees] - Types and entities.


📈 39.73 Punkte

✅ Early Adopter Umbraco v14 - Workspaces


📈 39.73 Punkte

✅ Early Adopter's Guide to Umbraco v14 Packages : Communicating with the server! - Part 4 - FrontEnd!


📈 39.73 Punkte

✅ Creating your own UI extension points in Umbraco v14 - Part 6: Filters & Conditions


📈 39.73 Punkte

✅ Creating your own UI extension points in Umbraco v14 - Part 5: Kinds


📈 39.73 Punkte

✅ Creating your own UI extension points in Umbraco v14 - Part 4: Interchangeable Elements


📈 39.73 Punkte

✅ Creating your own UI extension points in Umbraco v14 - Part 3: Customizable APIs


📈 39.73 Punkte

✅ Creating your own UI extension points in Umbraco v14 - Part 2: Extension Slots


📈 39.73 Punkte

✅ HTTP Asynchronous Reverse Shell - Asynchronous Reverse Shell Using The HTTP Protocol


📈 32.61 Punkte

✅ Unraveling the Mysteries of Asynchronous JavaScript: Callbacks to Async/Await


📈 31.49 Punkte

✅ Understanding Asynchronous JavaScript: Callbacks, Promises, and Async/Await


📈 31.49 Punkte

✅ Understand the Asynchronous JavaScript: Callbacks, Promises, and Async/Await


📈 31.49 Punkte

✅ Mastering Asynchronous JavaScript: Promises, Async/Await, and Callbacks


📈 31.49 Punkte

✅ Asynchronous JavaScript: Promises Async Await!


📈 31.49 Punkte

✅ Asynchronous Programming in C#: Async/Await Patterns


📈 31.49 Punkte

✅ Master Async/Await in JavaScript: A Practical Guide for Asynchronous Programming


📈 31.49 Punkte

✅ Mastering Async Await in JavaScript for Asynchronous Programming


📈 31.49 Punkte

✅ Understand async/await with asyncio for Asynchronous Programming in Python


📈 31.49 Punkte

✅ Mastering Asynchronous JavaScript: A Guide to async/await and Promises ⌛️


📈 31.49 Punkte

✅ Asynchronous JavaScript: Callbacks, Promises, and Async/Await


📈 31.49 Punkte

✅ Advanced Asynchronous Patterns: Async/Await in Node.js


📈 31.49 Punkte

✅ Exploring Asynchronous JavaScript: Callbacks, Promises, and Async/Await


📈 31.49 Punkte

✅ Asynchronous Programming in JavaScript – Callbacks, Promises, & Async/Await Examples


📈 31.49 Punkte

✅ Asynchronous JavaScript Course – Async/Await , Promises, Callbacks, Fetch API


📈 31.49 Punkte

✅ Mastering Async/Await: Simplifying JavaScript's Async Operations


📈 30.37 Punkte

✅ Is async/await a good idea? 🤔 async/await vs promises


📈 30.37 Punkte











matomo

Datei nicht gefunden!