Question

在my Phoenix / Elixir样板Web应用程序中，我具有描述的典型结构here，其中简单的HelloController使用HelloView组件在hello/中呈现模板夹。这样可以。现在，假设我要添加snake_view.ex视图组件here。此视图取决于Phoenix LiveView，并且与其他呈现模板的普通视图略有不同，因为它在其他功能中具有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，但是出了点问题。

[更新]

我意识到在PhoenixFramework WebApp中使Phoenix LiveView工作之前，我有很多事情要做：

端点endpoint.ex。您需要添加

socket "/live", Phoenix.LiveView.Socket

路由器router.ex。通过LiveView向PageController添加路由：
```
get "/snake", PageController, :snake
```

在PageController中为snake函数添加一个定义：

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

WebApp your_app_web.ex。在view中定义

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

configs.exs

Config。添加LiveView盐令牌：

live_view: [
    signing_salt: "YOUR_LIVEVIEW_TOKEN"
 ]

在您的live Web应用程序文件夹中添加一个your_app_web文件夹。将您的LiveView视图放在此处。

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

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

添加了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()

也许添加并确认您也涵盖了其余步骤。希望能奏效：）

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

1 个答案: