Then we can include our TriviaCard component below our Heading component and because our TriviaCard component is stateful we’ll want to give it an ID. We’ll go back to the PageLive module and alias our TriviaCard module so we can call it without the prefix. Now that we have our component let’s include it on the page. Lib/teacher_web/live/trivia_card.ex defmodule TeacherWeb.TriviaCard doĭata trivia_value, :string, default: "a trivia question" Because we’re using a default value for our data assign here, Surface initializes it for us - we don’t need to implement the mount callback. We’ll comment out our mount callback and then add the data macro followed by the name - trivia_value the type of string and then any options we want to add. And to declare a data assign we use the data macro. In Surface those assigns are called data assigns. With LiveView we’d write a mount callback and then initialize any assigns. Let’s store that value in Wrapping it in the double curly braces will tell the compiler to inject the into the generated code and any valid expression is accepted. I”ll paste in some HTML to use with in trivia card then we’ll want to render either the trivia question or answer, depending on whether its been answered. We’ll create a new module in the “live” directory named trivia_card.ex Because our TriviaCard component will need to own its state we’ll use Surface.LiveComponent - this is the component type for stateful components.Īlright now, let’s add the render callback to render our trivia card template. It will display a trivia question and have a button we can click to reveal the answer. Let’s create a stateful Surface component that we can use to play trivia. These are the question and answer for each trivia card. We’ll go back to our app and it has a Card schema module that if we open we can see has two fields answer and question. Congratulations you just created your first Surface component! Now let’s create another. Then if we go back to the browser, our page is now displaying the Heading component. We’ll go to the command line and start our server. Let’s go back to our page_live.ex and because components are just modules we can alias TeacherWeb.Heading and then include in our template. Now that we have our component module defined. Lib/teacher_web/live/heading.ex defmodule TeacherWeb.Heading do Then we’ll define the render callback and using the ~H sigil again we’ll include the content we want to render. We’ll define our module and because our heading component won’t need to own its state we’ll want to use Suface.Component - this is the component type for stateless components. Now let’s create a module named heading.ex - this will be the Surface component for our page heading. Lib/teacher_web/live/page_live.ex defmodule TeacherWeb.PageLive do Let’s update our render callback to use that. Surface provides a wrapper around LiveView called Surface.LiveView - let’s update this to use it. Here we’re calling use TeacherWeb, :live_view. Before we can do that, we’ll need to update our PageLive to use Surface. Let’s turn our “Movie Trivia” heading into our first Surface component. Surface is built on top of Phoenix LiveView, it supports both stateless and stateful components. Remember to replace teacher with the name of your application.Īlright, now let’s open our up PageLive this is the LiveView that handles our app homepage. sface file extension so we’ll update live_reload: with a regular expression for Surface templates ~r"lib/teacher_web/live/.*(sface)$". To have our app live reload them, we’ll open our config/dev.exs and Surface templates use the. formatter.exs and update the import_deps to include surface. If you use mix format you’ll need to update the formatter to use surface. Then let’s go to the command line and run mix deps.get. Then we’ll open our applications Mixfile and add surface to our list of dependencies. If you’re not familiar with LiveView or LiveView components, check out episode #129.Īlright, let’s get started by grabbing the surface package from hex.pm. To implement the interface for this we’ll use Surface, which is a server-side rendering component library that is built on Phoenix LiveView. Our trivia game will display a trivia question along with a button we can click to reveal the answer to the question. In this episode, we’ll create a way for us to play movie trivia. Here we have a movie trivia application, but as you can see, there’s not currently a way to play it.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |