While this is a basic example, you may add handle_info callbacks for any subscribed PubSub topics which are relevant to the live view. Still in lib/blog/posts.ex, add a private function to broadcast changes: defp broadcast_change(, socket) doĪll we’re doing here is responding to an incoming broadcast from Posts by fetching the list of posts again and assigning it to the socket. Speaking of which, let’s set up the broadcast. (Blog.PubSub, will allow our live view and other modules to subscribe to events that we broadcast. Head to lib/blog/posts.ex and add this: inspect(_MODULE_) In order to fix that we need to leverage Phoenix PubSub. Go into the posts_live/ template and replace all instances of with Boom! Your live template should load without error and look exactly like your original index page. Now we have a new error from Phoenix: key :conn not found. Socket = assign(socket, posts: Posts.list_posts()) Manually assign our list of posts to the socket and then return the socket, like this: defmodule do We’re only going to use the socket so you can prefix the others with an underscore to show that we don’t care about them. This function takes three arguments: params, session and socket. Head back to the index.ex module and define a mount function. We need to get that data to the live view another way. The first problem we must solve: since our view is no longer being rendered from the posts controller, we don’t have access to our lists of posts, like we used to. We have duplicated our old ‘dead’ view and must now plug in the wires to make the template work as a live view. Now, go into the templates/post folder (where the non-live views live) and copy the contents from into lib/blog_web/live/posts_live/. Create live templateĬreate a file in the blog_web/live/posts_live folder called. We could add a render function to our module, satisfying the error, but we’re going to take a different approach. Now our module is defined, but we get an error from Phoenix because render is not implemented. Inside that file define the module like so: defmodule do
Within this directory add a file called index.ex. Add another new directory called posts_live.
Liveview elixir code#
This is where your live-view related code will live. Define moduleĬreate a directory under lib/blog_web called live. If you hit localhost4000/postslive in your browser right now you should get an error because the module BlogWeb.PostsLive is not available. In your router.ex file, after pipe_through: :browser, add something like this: live “/postslive”, PostsLive.Index 1: Define live routeįirst we need to define a route to our live view.
Liveview elixir update#
Now here we go with the cool stuff: converting this default index page into a live view, so that when you create, update or delete posts any browser window that’s pointed at the page will update automatically, no refresh required. This is pretty much the simplest possible Phoenix app.
Back on the posts index page you’ll see the default links for looking at, editing and deleting your new post. Follow the links to create a new post and save it to the database. Now you can boot up your server with mix phx.server and visit localhost:4000/posts to see your (empty) list of posts. Mix Posts Post posts title:string body:textĪs prompted, add the posts resource to your router in the browser scope:
Liveview elixir generator#
Use the handy generator tool to create the Post controller, context and views:
Liveview elixir install#
When asked if you want to fetch and install dependencies, say yes (Y)Įnter the blog folder and set up the database: If your app already exists, skip ahead to step 1.įrom your preferred directory, run this command: Note: If you are using a Phoenix version earlier than v1.5, make sure you I’ll start by quickly bootstrapping a blog application with a single resource, posts. We will be building a dead-simple example in order to maximize the likelihood that you’ll be able to easily grok the steps and use them in your own projects. I won’t be going into detail about how all the features work, but even if you’ve never used it before you should be able to follow along and get up and running easily. LiveView powered applications are stateful on the server with bidirectional communication via WebSockets, offering a vastly simplified programming model compared to JavaScript alternatives.” “Phoenix LiveView is an exciting new library which enables rich, real-time user experiences with server-rendered HTML. From Chris McCord’s announcement of the library: This is a guide for converting an existing Phoenix view into a LiveView.
0 kommentar(er)
