![]() We can see that our message is printed in our development logs. When we go back to the browser and click our “Answer” link. lib/teacher_web/live/card_live/card_component.ex truedef render(assigns) do ~L""" To do that we need to open our CardComponet and include (a phx-target with the myself assign) phx-target: - this is a reference to this instance of the component. We need to specify that we want to send this event to our CardComponent. This is a common gotcha when starting with LiveView components. Let’s try our “Answer” link and if we go to our development logs we get an error because our event is being sent to the parent PageLive, which we don’t want. Now when we go back to the browser - our component is displayed. Template path: lib/teacher_web/live/page_. That’s up to you and how you render a component. It’s worth noting here that including the ID doesn’t necessarily mean it will be used as the DOM ID. And for its value we’ll just use the card’s ID. To do that we need to go to our page_ template and include an id. ![]() In other words, we need to make our component Stateful. Since our component is now implementing handle_event it requires an ID to be included in the component assigns. Now if we go back to the browser, we’ve got an error: * (RuntimeError) a component that has implemented handle_event/3 or preload/1 requires an :id assign to be given. ![]() * creating lib/teacher_web/live/live_helpers.ex * creating lib/teacher_web/live/modal_component.ex * creating test/teacher_web/live/card_live_test.exs * creating lib/teacher_web/live/card_live/ * creating lib/teacher_web/live/card_live/form_ * creating lib/teacher_web/live/card_live/form_component.ex * creating lib/teacher_web/live/card_live/index.ex * creating lib/teacher_web/live/card_live/show.ex Now we have a Card schema for our trivia cards and a Game context module. We’ll have trivia cards, so Card will be our schema module with the table name cards and each card will have a question and an answer. We’ll go to the command line and use the the Phoenix LiveView generator and since this is a trivia game, we’ll call our context module Game. To start we’ll use this empty Phoenix LiveView application that doesn’t have any contexts or schemas. The trivia card here will be our LiveView component. We’ll build a Movie Trivia app that gives us trivia questions that gives us trivia questions. In the docs, there’s an example of a CardComponent - let’s take this idea and build on it to get a better idea of how components work and how we can use them to compartmentalize functionality inside of LiveView. We’ll explore both types in this episode. There are two types of LiveView components: Stateless and Stateful. LiveComponents are a way to help compartmentalize state and events when using Phoenix LiveView.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |