Elixir 使用“凤凰仙丹”中的渲染调用视图

在Phoenix/Elixir样板web应用程序中，我描述了典型的结构，其中简单的

HelloController

使用HelloView组件呈现

hello/

文件夹中的模板。这样行。 现在假设我想添加

snake\u view.ex

view组件。此视图依赖于

Phoenix

，其行为与渲染模板的其他普通视图稍有不同，因为它具有

render

方法以及其他功能：

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

现在，在添加了

LiveView

依赖项之后，我在

router.ex

get "/snake", SnakeController, :index

但是现在我不知道如何从这个新的

蛇控制器

中引用

蛇视图

：

defmodule HelloWeb.SnakeController do
  use HelloWeb, :controller

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

我在前往时遇到的错误是

因此，似乎从路由器调用了

SnakeController

，也调用了

SnakeView

，但出现了一些问题

[更新]

我已经意识到，在PhoenixFramework网络应用程序中运行Phoenix

LiveView

之前，我缺少很多事情要做：

端点

Endpoint.ex

。您需要添加一个

socket "/live", Phoenix.LiveView.Socket

路由器

Router.ex

。通过

PageController

将路由添加到

LiveView

：

get "/snake", PageController, :snake

在

PageController

中，为

snake

功能添加def：

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

WebApp

your\u app\u web.ex

。添加

视图

定义

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

在

configs.exs

中进行配置。添加

LiveView

salt令牌：

live_view: [
    signing_salt: "YOUR_LIVEVIEW_TOKEN"
 ]

在您的

应用程序\u web

应用程序文件夹中添加一个

live

文件夹。将您的

LiveView

视图放在那里

在主

app.js

文件中添加WebSocket连接：

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

添加了css资源：

live\u 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

在此阶段，将浏览器指向 我让LiveView部分工作：

---

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

在本页底部--至少有一个步骤我在您的代码中没有看到

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

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

---

也许可以加上这一点，并确认您已经涵盖了其余步骤。希望它能起作用：）

render/2

->2arguments@m3characters谢谢，我已经清理了示例，并修复了大多数问题，但它仍然不能完全工作。看看github回购协议。好的，让我看看。这是web套接字客户端部分，很有意义！因此，我添加了缺少的客户端web套接字连接部分和其他缺少的客户端部分（css、html）：。但它仍然不起作用。我在本地克隆了您的repo，在安装依赖项等之后，它就可以正常工作了。也许你还没有按下其中一个箭头键？这是启动游戏的导火索。是的，我终于能够让它工作了，增加了更多的步骤！谢谢你的回答。

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

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