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

Question

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

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

现在，在添加了LiveView 依赖之后，我在router.ex 中添加了一个路由

get "/snake", SnakeController, :index

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

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，但是出了点问题。

[更新]

我意识到，在使 PhoenixLiveView 在 PhoenixFramework WebApp 中运行之前，我还有很多事情要做：

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

   socket "/live", Phoenix.LiveView.Socket
   

2. 路由器router.ex。通过PageController 添加到LiveView 的路由：

   get "/snake", PageController, :snake
   

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

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

4. Web 应用程序your_app_web.ex。添加viewdef

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

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

   live_view: [
       signing_salt: "YOUR_LIVEVIEW_TOKEN"
    ]
   

6. 在您的 your_app_web Web 应用文件夹中添加一个 live 文件夹。将您的LiveView 视图放在那里。

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

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

8. 新增css资源：live_view.css，snake.css，导入app.css新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 部分工作：

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

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()

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