PHOENIX LIVEVIEW EXAMPLES MOVIE

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.

PHOENIX LIVEVIEW EXAMPLES MOVIE

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.

Phoenix liveview examples