在正常路线中：

get /index, MyController, :index

Plug.Conn我可以简单地从的 path_info 函数获取路线。

但是，如果我有实时路线，如何检索当前路径？

live /index, IndexLive

抱歉，这篇文章很长，我试图提供所有信息并解释我已经尝试过的内容。

问题： 我将经典的凤凰视图放入实时视图中。虽然一切看起来都很好，但 echart 一完成绘制就消失了。好像没有办法找回来。

这是我的图表。如您所见，我也尝试将其与phx:update-event 挂钩。但这无济于事... graph.js：

updateGraph = function() {
  console.log("updating the graph...")
  let device_name = document.getElementById('device-name').value;
  let series_data = document.getElementById('history_chart_data').dataset.series;

  series_data = JSON.parse(series_data);

  // draw chart
  window.myChart.setOption({
    [chart options omitted]
  });
}

initGraph = function() {
  // initialize echarts instance with prepared DOM
  window.myChart = echarts.init(document.getElementById('history_chart'), 'light');
  updateGraph();
}

document.addEventListener('DOMContentLoaded', initGraph, false);
document.addEventListener('phx:update', updateGraph);

这是 html ( graph.html.leex)。如您所见，为了安全起见，我什至将数据放在另一个 div 中。

    <%= if assigns[:ttnmessages] do %>
      <script src="<%= Routes.static_path(DatabaumWeb.Endpoint, "/js/jcharts.min.js") %>"></script>
      <script src="<%= Routes.static_path(DatabaumWeb.Endpoint, …

我正在编写一个 ClockComponent 来了解 Phoenix LiveComponents。我几乎拥有它，但它正在向其父级发送 :tick 消息。我怎样才能让它向自己发送该消息？我想用myself()而不是self()但显然那不是一回事。

defmodule ClockComponent do
  use Phoenix.LiveComponent

  @impl true
  def mount(socket) do
    if connected?(socket), do: :timer.send_interval(1000, self(), :tick)
    {:ok, assign(socket, date: :calendar.local_time())}
  end

  def handle_info(:tick, socket) do
    {:noreply, assign(socket, date: :calendar.local_time())}
  end

  @impl true
  def render(assigns) do
    ~L"""
    The time is <%= @date |> Timex.to_datetime("America/Denver") |> Timex.format!("{RFC1123}") %>
    """
  end
end

问题

LiveView 折叠我打开的元素。

细节

我有一个在页面加载时折叠的元素：

<a class="collapse_trigger">...</a>
<div class="is-collapsible">
# content updated by liveview
</div>

如果用户点击可折叠，则可折叠有一个类.is-active。

<a class="collapse_trigger">...</a>
<div class="is-collapsible is-active">
# content
</div>

但是 liveview 删除了那个类。知道如何确保 liveview 忽略父元素<div class="is-collapsible is-active">但会照顾孩子吗？我的第一个想法是phx-update="ignore"。但是现在我想我需要将可折叠的逻辑放入后端。：/

附加信息

我将bulma-collapsible与一个 css 更改一起使用：

// the following is necessary because liveview does not work well with the bulma-collapsible. Otherwise elements would stay open but can be closed by clicking them twice.
.is-collapsible{
  height: 0;
  &.is-active{
    height: auto;
  }
}

假设我们通过live "/awesome", AwesomeLive.Index, :index.

现在，为了从常规模板或控制器呈现它，我们需要使用live_render/3.

但这行不通，因为： cannot invoke handle_params/3 on AwesomeLive.Index because it is not mounted nor accessed through the router live/3 macro

如何重构handle_params/3？里面是一个自动生成的代码，通过phx.gen.live

  @impl true
  def handle_params(params, _url, socket) do
    {:noreply, apply_action(socket, socket.assigns.live_action, params)}
  end

里面params是:not_mounted_at_router

编辑：

没有handle_params/3出现中断live_patch/2或其他内容并抛出 JavaScript 错误：

phoenix_live_view.js:1 Uncaught TypeError: Cannot read property 'el' of null
    at e.value (phoenix_live_view.js:1)
    at phoenix_live_view.js:1
    at e.value (phoenix_live_view.js:1)
    at e.value (phoenix_live_view.js:1)
    at e.value (phoenix_live_view.js:1)
    at phoenix_live_view.js:1 …

我正在尝试在 Javascript 事件触发后使用 Javascript 更新 Liveview。Liveview 必须显示一个<div>元素，其中包含从 Javascript 发送的一些值。

我的问题是：我应该如何将这些值从 Javascript 传递到 Liveview？

我可能还需要 Liveview 在 Javascript 中发送的值。再说一遍：我应该如何将这些值从 Liveview 传递到 Javascript？

有一个用 Javascript 创建的 Livesocket 用于实时查看，但我看不出有什么方法可以从那里获取或设置分配值。在某些时候，从 Liveview 传递值或向 Liveview 传递值的唯一方法似乎是通过 DOM。例如：

<div id="lv-data" phx-hook="JavascriptHook"></div>

let hooks = {};
hooks.JavascriptHook = {
  mounted(){

    this.el.addEventListener("jsEvent", (e) => 
      this.pushEvent("jsEventToPhx", e.data, (reply, ref) => 
        console.log("not sure what to do here")));

    this.handleEvent("phxEventToJS", (payload) => console.log("data received: " + payload));
  }
}

必须将 DOM 与虚拟对象一起使用来<div>进行纯数据交换，这感觉很奇怪......

您好，我使用不同的域名来加载不同的数据集。我目前正在使用自定义插件根据主机名加载正确的域 ID。endpoint.ex例如，在我的路由器之前得到了这个：

plug WebApp.DomainCheck
socket "/live", Phoenix.LiveView.Socket, websocket: [connect_info: [session: @session_options]]
...
plug WebApp.Router

和

defmodule WebApp.DomainCheck do
  import Plug.Conn
  @behaviour Plug

  def init([]), do: []

  def call(conn, _options \\ []) do
    domains = Model.load_allowed_domains()
    case Map.get(domains, conn.host) do
      nil ->
        conn
        |> resp(401, "Domain not allowed")
        |> halt()

      domain_id ->
        conn
        |> assign(:domain_id, domain_id)
    end
  end
end

现在这可以正常工作，View因为我domain_id在每个项目中都有分配。但是如何将数据从插头domain注入到我的设备中呢？LiveView

目前，我已将相同的域检查代码复制到每个 LiveViews mount()页面中：

defmodule WebApp.WelcomeLive do
  use WebApp, :live_view

  @impl …

我有一个 LiveView 应用程序，可以搜索机场代码。当用户输入时，ham它应该用 (String.upcase/1) 替换该表单字段的内容HAM，但事实并非如此。但根据我对我的代码的理解应该是这样。我需要更改什么才能用大写版本替换该字段中的所有输入？

顺便说一句：如果我向其添加一个按钮并使用phx-submit而不是phx-change. 但我想让它为phx-change.

设置

$ mix phx.new travelagent --live --no-ecto\n$ cd travelagent\n

lib/travelagent_web/router.ex

[...]\nscope "/", TravelagentWeb do\n  pipe_through :browser\n\n  live "/", PageLive, :index\n  live "/search", SearchLive\nend\n[...]\n

lib/travelagent/airports.ex

defmodule Travelagent.Airports do\n  def search_by_code(""), do: []\n\n  def search_by_code(code) do\n    list_airports()\n    |> Enum.filter(&String.starts_with?(&1.code, code))\n  end\n\n  def list_airports do\n    [\n      %{name: "Berlin Brandenburg", code: "BER"},\n      %{name: "Berlin Sch\xc3\xb6nefeld", code: "SXF"},\n      %{name: "Berlin …

我想使用以下功能将事件从 liveView 服务器发送到客户端：

  def handle_event("test", _, socket) do\n    {:noreply, push_event(socket, "testEvent", %{coins: 23, user: "user"})}\n  end\n

这在 liveview 文档中的解释非常相似。 \n https://hexdocs.pm/phoenix_live_view/js-interop.html \n但是我收到此错误消息：

(CompileError) undefined function push_event/3\n\nStacktrace:\n  \xe2\x94\x82 (elixir 1.10.4) src/elixir_locals.erl:114: anonymous fn/3 in :elixir_locals.ensure_no_undefined_local/3\n  \xe2\x94\x82 (stdlib 3.8) erl_eval.erl:680: :erl_eval.do_apply/6\n

我错过了一些导入吗？或者我做错了什么？

我想在 Phoenix 创建一个页面，它将链接到 router.ex 文件中声明的所有“实时”路由。例如 ：

...
live "/", PageLive
live "/light", LightLive
live "/license", LicenseLive
live "/sales-dashboard", SalesDashboardLive
live "/search", SearchLive
live "/autocomplete", AutocompleteLive
live "/filter", FilterLive
live "/servers", ServersLive
....

我想创建一个包含路线的列表，以便有路径链接。有没有办法从phoenix路由器动态获取所有现有的实时路由，而无需再次写入？

类似mix phx.routes打印出来的东西。

背景

我在一个伞式项目中有一个 Phoenix LiveView 应用程序，该项目基本上是一个 HelloWorld 项目。不过，这个 Phoenix 应用程序很特别，因为它是一个桌面应用程序： https: //github.com/elixir-desktop/desktop

我的 Phoenix 应用程序不使用 Ecto 也不使用任何数据库，因此我必须将常用PubSub行添加到application.ex.

问题

一切都按预期工作，除非我关闭应用程序。关闭它后我收到一个错误：

12:19:22.507 [error] GenServer #PID<0.553.0> terminating
** (ArgumentError) unknown registry: WebInterface.PubSub
    (elixir 1.13.1) lib/registry.ex:1334: Registry.info!/1
    (elixir 1.13.1) lib/registry.ex:985: Registry.register/3
    (phoenix_pubsub 2.0.0) lib/phoenix/pubsub.ex:117: Phoenix.PubSub.subscribe/3
    (phoenix 1.6.5) lib/phoenix/channel/server.ex:419: Phoenix.Channel.Server.init_join/3
    (phoenix 1.6.5) lib/phoenix/channel/server.ex:378: Phoenix.Channel.Server.channel_join/4
    (phoenix 1.6.5) lib/phoenix/channel/server.ex:298: Phoenix.Channel.Server.handle_info/2
    (stdlib 3.16.1) gen_server.erl:695: :gen_server.try_dispatch/4
    (stdlib 3.16.1) gen_server.erl:771: :gen_server.handle_msg/6
Last message: {Phoenix.Channel, %{}, {#PID<0.541.0>, #Reference<0.3172133806.691273734.151736>}, %Phoenix.Socket{assigns: %{}, channel: Phoenix.LiveReloader.Channel, channel_pid: nil, endpoint: WebInterface.Endpoint, handler: Phoenix.LiveReloader.Socket, …