问题标签 [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 投票
1 回答
160 浏览

elixir - 计算 current_visitors 和 current_users

我的 Phoenix 1.5.8 LiveView 应用程序使用phx_gen_auth进行用户身份验证。

  • 我将当前登录的用户分配给@current_user.
  • 我将当前访问者的数量(无论是否登录)分配给 @current_visitors_count.

现在我想用来@current_users_count显示以用户身份登录的访问者数量。但我不知道如何在handle_info. 计算两个数字的最佳方法是什么?

lib/example_web/live/page_live.ex

lib/example_web/live/live_helpers.ex

0 投票
1 回答
127 浏览

phoenix-framework - 在 Phoenix Live View 中创建子 Live View 时如何提供参数?

在实时视图中,我有这个片段:

在 ChatLive.Index 我有这个挂载功能:

但它给出了这个错误:

mount(%{"guest_id" => socket.assigns.guest.id}, session, socket).

如何将诸如来宾之类的参数传递给live_render调用并在mount函数中提取它?

0 投票
0 回答
72 浏览

amazon-s3 - 当我同时上传少量小文件时,为什么 Amazon S3 会出现“503 减速”错误?

我正在开发一个应用程序,允许用户同时将多达 10 个图像或文档文件上传到 S3。不幸的是,503 Slow Down当我只上传几个小于 1.2 MB 的文件时,我得到了一个错误,我无法弄清楚原因。

我正在使用此处找到的 JavaScript:https ://hexdocs.pm/phoenix_live_view/uploads-external.html

此代码可以很好地上传一个,有时是两个或更多文件到 S3,但如果文件数量为 4 个或更多,通常会无法上传某些文件并出现 503 Slow down 错误。我以 5 MB 的块上传它们,这是 S3 允许的最小块大小,但是因为所有文件的大小都小于 5 MB,所以它们都应该在一个块中上传。我也将块超时更改为一分钟。

我还尝试在更近的区域创建一个新的 S3 存储桶并改用它,但问题仍然存在。我认为 S3 应该比这更有能力,所以我很沮丧从我的开发机器上传几个小文件失败。

任何帮助将不胜感激。

0 投票
1 回答
166 浏览

phoenix-live-view - 如何防止 Phoenix Live View 删除由 JavaScript 放置的 DOM 元素?

我还没有找到一种方法来始终阻止 Phoenix Live Views 从 DOM 中删除由 JavaScript 放置的元素。这是一个粗略的聊天应用程序的片段,该应用程序使用 JavaScript 在页面加载后添加笑脸:

JavaScript 添加的带有笑脸的初始页面

phx-update="ignore"属性可防止笑脸立即消失,但添加新聊天会使其消失:

添加聊天后的页面,实时视图删除了笑脸

0 投票
1 回答
148 浏览

phoenix-live-view - 在 Phoenix Live View 中,删除项目会删除 phx-hook 放置的 DOM 元素

在一个人为的聊天应用程序中,我通过phx-hook. 添加聊天后,笑脸还在:

添加聊天后

但是,删除聊天后,笑脸消失了:

删除聊天后

我怎样才能防止它消失?

0 投票
1 回答
354 浏览

phoenix-live-view - Phoenix Live View 使用 phx-update="ignore" 不断重建 DOM 元素

在我设计的聊天应用程序中,我在底部有一个时间戳,应该告诉我页面何时加载。添加聊天不应该改变它,我phx-update="ignore"在包含时间戳的 div 上包含了一个属性以防止:

但是,添加聊天时会更新时间戳。这是初始状态:

添加聊天之前

然后我点击新建聊天,对话框出现:

添加聊天

我检查了 DOM,我知道该步骤没有更改时间戳。但是,当我按下保存按钮时,时间戳确实发生了变化:

添加聊天后

我怎样才能防止这种情况发生?

0 投票
2 回答
151 浏览

elixir - 从根模板phoenix 发送输入值

我的文件中有这个表格,root.html.leex我想处理这个事件,但我不知道我必须在哪里处理它!

0 投票
1 回答
60 浏览

elixir - 如何使用 render_change 结果匹配特定元素?

我正在使用render_change/2测试 LiveView 表单

我得到的结果是一个包含渲染 html 的字符串。

我希望assert结果有一些特定的元素。可以使用element/2这样的函数来完成

但它只接受 LiveView 的实例,而不是 html 字符串。

断言render_change/2结果将具有带有特定文本的特定标签的最佳方法是什么?

0 投票
1 回答
82 浏览

html - 在 Elixir 中有条件地渲染组件的一部分

我是 elixir 新手,无法以 DRY 方式渲染此组件。我有这个 CardHeader 组件

可能有也可能没有@truck_load.measured_weight 值。如果是这样,我希望将 info 变量设置为其值,并使用字符串插值来显示测量单位。如果没有 @truck_load.measured_weight 值,我不希望出现测量单位,所以我希望将 info 设置为空字符串。

如果没有单独的 CardHeader 组件来检查 @truck_load.measured_weight 是否像这样,我无法弄清楚如何让它工作:

有没有更好、更干燥的方法来做到这一点?

谢谢!!

0 投票
2 回答
1275 浏览

elixir - 如何将事件直接从 Phoenix Live View 发送到组件

我对 Phoenix LiveView 组件 (v0.15.4) 有疑问。

在文档中,有一个示例代码:

LiveView 组件没有handle_info/2回调,因此send_update/3被调用以将事件从父 LiveView 重定向到特定组件。

但是,我想将事件直接从父 LiveView 发送到特定组件,因为我想做这样的事情

当然,没有Phoenix.LiveView.send_event/2. 以上是一个虚构的代码来说明我的意图。

phx-target="<%= @myself %>"我知道如何通过将属性添加到 HTML 元素或使用pushEventToJavaScript 程序中的方法将事件从客户端(浏览器)发送到特定组件。

但是,据我所知,没有办法将事件直接从父 LiveView 发送到特定组件。

有什么解决方法或更好的方法吗?