elixir - 在 Phoenix Elixir 中调用带有渲染的视图

Question

在我的Phoenix/Elixir 样板 Web 应用程序中，我具有此处描述的典型结构，其中简单HelloController使用 HelloView 组件来呈现hello/文件夹中的模板。这工作正常。现在假设我想在此处snake_view.ex添加View 组件。这个 View 依赖于LiveView并且与渲染模板的其他普通视图略有不同，因为它在其他功能中包含一个方法：Phoenix render

defmodule HelloWeb.SnakeView do
  use Phoenix.LiveView
   # ..
   def render(%{game_state: :over} = assigns) do
   # ..

现在，添加LiveView依赖项后，我在router.ex

get "/snake", SnakeController, :index

但现在我不知道如何引用SnakeView这个新的SnakeController：

defmodule HelloWeb.SnakeController do
  use HelloWeb, :controller

  def index(conn, _params) do
    render(conn)
  end
end

我在前往http://localhost:4000/snake时遇到的错误是

function HelloWeb.SnakeView.render/2 is undefined or private

所以似乎从路由器SnakeController调用了，而且也被调用了SnakeView，但是出了点问题。

[更新]

我已经意识到，在使LiveViewPhoenixFramework WebApp 中的 Phoenix 运行之前，我还有很多事情要做：

1. 端点endpoint.ex。您需要添加一个

   socket "/live", Phoenix.LiveView.Socket
   

2. 路由器router.ex。添加到LiveViewvia 的路由PageController：

   get "/snake", PageController, :snake
   

3. 在PageController为函数添加 def 中snake：

      def snake(conn, _) do
          conn
          |> put_layout(:game)
          |> LiveView.Controller.live_render(HelloWeb.SnakeLive, session: %{})
        end
   

4. 网络应用程序your_app_web.ex。添加view定义

   import Phoenix.LiveView, only: [live_render: 2, live_render: 3]
   

5. 配置在configs.exs. 添加LiveView盐令牌：

   live_view: [
       signing_salt: "YOUR_LIVEVIEW_TOKEN"
    ]
   

6. live在您的your_app_webWeb 应用程序文件夹中添加一个文件夹。把你的LiveView观点放在那里。

7. 在主app.js文件中添加 WebSocket 连接：

       import {LiveSocket, debug} from "phoenix_live_view"
       let liveSocket = new LiveSocket("/live")
       liveSocket.connect()
   

8. 添加了 css 资源: live_view.css, , 在新 csssnake.css中导入：app.css

       @import "./phoenix.css";
       @import "./live_view.css";
       @import "./snake.css";
   

生成的 WebApp 结构现在应该是：

├── assets
│   ├── css
│   │   ├── app.css
│   │   ├── live_view.css
│   │   ├── phoenix.css
│   │   └── snake.css
│   ├── js
│   │   ├── app.js
│   │   └── socket.js
├── config
│   ├── config.exs
├── lib
│   ├── hello
│   │   └── application.ex
│   ├── hello.ex
│   ├── hello_web
│   │   ├── channels
│   │   ├── controllers
│   │   ├── endpoint.ex
│   │   ├── gettext.ex
│   │   ├── live
│   │   ├── router.ex
│   │   ├── templates
│   │   └── views
│   └── hello_web.ex

在这个阶段，当将浏览器指向http://localhost:4000/snake 时，LiveView 部分工作：

请在此处查看完整代码以调查此问题。

标签： elixirphoenix-framework

Answer 1

在此页面的底部 - https://github.com/phoenixframework/phoenix_live_view - 至少有一个步骤我在您的代码中没有看到。

// assets/js/app.js
import LiveSocket from "phoenix_live_view"

let liveSocket = new LiveSocket("/live")
liveSocket.connect()

也许添加它并确认您已经涵盖了其余步骤。希望这有效:)