问题标签 [phoenix-live-view]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
835 浏览

elixir - Phoenix render LiveView from a regular template or controller

Let say we have LiveView rendered from a router via live "/awesome", AwesomeLive.Index, :index.

Now, in order to render it from a regular template or controller we need to use live_render/3.

But that won't work, because: cannot invoke handle_params/3 on AwesomeLive.Index because it is not mounted nor accessed through the router live/3 macro

How to refactor handle_params/3? Inside is a autogenerated code via phx.gen.live

Inside the params is :not_mounted_at_router

EDIT:

Not having handle_params/3 appears to break live_patch/2 or something and throw JavaScript error:

Versions:

  • Erlang/OTP 23
  • Elixir 1.10.3
  • :phoenix, "1.5.1"
  • :phoenix_live_view, "0.12.1"
0 投票
1 回答
459 浏览

phoenix - Live View 应用程序在全新安装后不断重新加载

我刚刚生成了一个新的实时视图应用程序,phx.new --live并且不断收到此错误:

复制信息

我用的是凤凰版1.5.3

然后我生成了一个“组织”模块mix phx.gen.live Orgs Org orgs name:string email_end:string avatar_url:string description:string

0 投票
1 回答
692 浏览

elixir - 在 Phoenix LiveView 中渲染不同的实时模板名称

在常规控制器/视图中,假设我有AppWeb.ItemView, 和AppWeb.ItemController. 假设我有两个不同的索引,:index并且:index_funky. 如果我想index.html.eex为视图渲染,我可以在头部和内部:index_funky创建一个渲染函数来执行. 这很好用:我会使用模板从.AppWeb.ItemViewrender("index_funky.html", assigns)render("index.html", assigns)AppWeb.ItemController.index_funkyAppWeb.ItemController.index

我怎样才能对 a 做同样的事情LiveView?如果我有AppWeb.ItemLive.Indexand ,我该AppWeb.ItemLive.IndexFunky如何渲染?index.html.leexAppWeb.ItemLive.IndexFunky

0 投票
1 回答
842 浏览

elixir - 如何从 LiveView Phoenix 更新 LiveComponent

我有一个LV作为..

page_live.ex

在 html.leex 我有

Server LiveComponent我有

由于 LV 将安装并发evercam_server_branches送到:live_view我只显示branch_name其他值将来自其他方法。

基本上是这样,Github.branch(repo, branch)但我不确定在哪里调用此方法并更新所有正在加载的值,Server我将更新它们将从branch/2方法返回的值。

:live_view加载时启动。我只想显示一个带有分支名称和加载图标的屏幕,然后在获取branch/2值后更新服务器。

我在找路,我怎么能在这里打电话

并更新Server值?

0 投票
0 回答
331 浏览

phoenix-framework - Phoenix different title per page with root module

This question is similar to (but not an exact duplicate of) Phoenix Framework - page titles per route.

Ideally, i want to create titles like in the described question, but I am using a root layout since my project uses Phoenix LiveView. The HTML skeleton including the head and title HTML tag are part of the root template (root.html.eex). The app template extends on that from my understanding. I implemented the code from the above question

and created a title function inside of my specific page view

but the else branch of the code is triggered. Upon further inspection, I think that the issue is with using a root template, because the @view_module while rendering the root template is StHubWeb.LayoutView, and only inside of the LayoutView/app.html.eex template, the @view_module is my actual view (StHubWeb.WowsView).

I am not sure how to solve this other than removing the root template, but then my LiveView will have to contain the entire HTML skeleton all the time. Maybe there is a way for me to define a title function in my LayoutView that will grab the title from StHubWeb.WowsView, but I am not sure how to do that.

Thanks for the help!

0 投票
1 回答
202 浏览

elixir - ProyectWeb.PageLiveView.handle_info/2 中没有函数子句匹配

我不知道如何匹配我的异步函数和我的 handle_info

此代码有效:

我的意图是以这种方式接收它:

0 投票
1 回答
2040 浏览

javascript - 如何从 javascript 与 liveview 正确通信

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

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

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

在 Javascript 中创建了一个 Livesocket 以供 liveview 工作,但我看不到从那里获取或设置分配值的方法。从/到 Liveview 传递值的唯一方法似乎是在某些时候通过 DOM。例如:

这感觉很奇怪,必须使用带有假人的 DOM 来<div>进行纯粹的数据交换......

0 投票
3 回答
1844 浏览

elixir - 在 Phoenix LiveView 中提交后重置表单输入字段

我在 Phoenix LiveView 中有一个带有 phx-submit 绑定的表单。可以通过单击“发送”按钮或在文本字段中按回车键来提交表单。

我的问题是,如果我通过按 Enter 键提交表单,则输入字段不会被清除,但是如果我通过单击按钮提交,则输入字段会清除。

我希望在这两种情况下都清除输入字段。

下面是我的表格:

和我的handle_event实现:

0 投票
1 回答
661 浏览

elixir - 为什么 Phoenix LiveView 函数 `push_event` 未定义?

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

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

我错过了一些进口吗?或者我做错了什么?

0 投票
3 回答
722 浏览

elixir - Elixir phoenix LiveView 可折叠在更新时折叠

问题

LiveView 折叠我打开的元素。

细节

我有一个元素在页面加载时开始折叠:

如果用户单击可折叠项,则可折叠项具有一个类.is-active

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

附加信息

我使用bulma-collapsible进行一次 CSS 更改: