AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
Phoenix liveview form8/27/2023 ![]() ![]() ![]() Let's add its corresponding live route to the routes file: #. To let the user create new event types, we will add a new screen with a form to enter the new event's name, description, duration in seconds, and color. Let's get cracking! Creating new event types In this part, we will focus on creating and editing event types. Finally, we implemented our first JavaScript client hook to copy an event's public URL into the user's clipboard. We also implemented the initial page for managing event types, listing all the existing ones in the database, using a new live component. In the last part of the series, we started building the private admin side of our application, consisting of a new live session and layout. Generating the initial project and domain models.The search component’s template uses the query and value attributes of the assignment to ensure that the correct radio button is selected and that the search form input is correctly populated with a value if one is present.This post belongs to the Building a simple Calendly clone with Phoenix LiveView series. Let’s take a look at the component’s template now in order to understand how it uses the information in the search form’s state to render appropriately. The MessageLive.SearchComponent‘s template renders with the assignment, correctly rendering the search form to reflect any selected search query type and input. The MessageLive.Index‘s template calls live_component/3, passing through the assignment The MessageLive.Index live view’s template renders with the assignment render ( RailwayUiWeb.MessageView, "index.html", assigns ) end def mount ( _session, socket ) do socket = socket |> assign ( :page, 1 ) |> assign ( :search, % Search end Our live view module responds to search form events and maintains the state of the search form, handles the search form submission and renders the template with various search and pagination params.Ī simplified version of our live view looks something like this: defmodule do def render ( assigns ) do Phoenix.View. We’re using LiveView to enact the search functionality, pagination and maintain which messages are currently being displayed in state. Our app persists these messages in the DB and exposes a UI for users to list and search such persisted messages. Let’s say we have an application that uses a message broker like RabbitMQ to publish and consume messages between systems. Let’s take a look at how we can use components to refactor some complicated LiveView code in an existing application. This makes components a great way to peel off responsibilities from an overly complex live view. While stateless components don’t do much more than render a particular leex template, stateful components implement a handle_event/3 function that allow us to update the component’s own state. Since they share a process with their parent live view, communication between the two is simple (more on that later).Ĭomponents can be stateless or stateful. –– docsĬomponents are run inside a parent live view process via a call to _component/3. …a mechanism to compartmentalize state, markup, and events in LiveView. One way to achieve this goal is to leverage the Phoenix.LiveComponent behaviour.Ĭomponents are modules that use the Phoenix.LiveComponent behaviour. How can we write live views that are easy to reason about and maintain while adhering to common design principles like SRP? If we’re not careful, this can lead to “fat controller syndrome”––live views that are jam packed with complex business logic and disparate responsibilities, just like the classic “fat Rails controller”. As LiveView becomes a more established technology, we naturally find ourselves using it to back more and more complex features. ![]()
0 Comments
Read More
Leave a Reply. |