![]() If users haven't completed a game rating, they will see a list of forms to rate each game 1-5 stars. ![]() The ratings index component will iterate over the games and show a game rating if one by the current user exists, or a form for a new rating if not. This live view will render a child functional component, "ratings index". ![]() We'll begin with a parent live view that lives at the /survey route, ArcadeWeb.SurveyLive. Let's lay out what we'll build in a bit more detail. We'll focus on that second part of the survey - the game rating forms. In this post, we'll build out a "user survey" feature that asks the user to fill out some demographic info about themselves and then provide a rating for each of several games. A user can log in, select a game to play, and even invite friends to play games with them. Imagine that you're responsible for a Phoenix web app, Arcade, that provides in-browser games to users. Let's dive in! The Feature: Compose a User Survey UI for a Phoenix LiveView Appīefore we dive into writing any actual code, let's talk about the feature we'll build. We'll also use more sophisticated live components to craft easy-to-maintain single-page flows that handle complex user interactions.Īlong the way, you'll gain a solid understanding of working with HEEx - Phoenix and LiveView's new templating engine - and you'll see some of LiveView's out-of-the-box function components in action. In this post, we'll take a look at how you can layer simple, single-purpose functional components to wrap up shared presentation logic. LiveView empowers developers to build interactive, single-page web apps with ease by providing a framework that eliminates the need for guesswork.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |