- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试在触发 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>
一起使用感觉很奇怪完全用于纯粹的数据交换......
最佳答案
是您的LiveView
用于处理 jsEventToPhx
的模块您从前端发送的事件?您必须有 parent LiveView
或 LiveViewComponent
它实现了 handle_event/3
此消息的回调。看:
https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#c:handle_event/3
例如(在您的 LiveView 模块中):
def handle_event("jsEventToPhx", params, socket) do
# Here the `params` variable is what you are sending form the
# client-side, so it will be `%{foo: "bar"}` if you
# follow the next example.
{:reply, %{hello: "world"}, socket}
end
然后在你的 Hook 中,你只需要使用
this.pushEvent
:
let hooks = {};
hooks.JavascriptHook = {
mounted(){
this.pushEvent("jsEventToPhx", {foo: "bar"}, (reply, ref) =>
// this will print `{hello: "world"}`
console.log(reply);
}
}
}
当您想要将数据发送到 LiveView 并选择立即接收响应时,这是一种方法。
LiveView
发送一些东西到客户端,则过程略有不同。在 LiveView 中,您使用
push_event
从任何
handle_event
返回套接字时回调,例如:
{:noreply, push_event(socket, "phxEventToJS", %{abc: "xyz"})}
在你的 Hook 中,你订阅了事件:
mounted(){
this.pushEvent("jsEventToPhx", {foo: "bar"}, (reply, ref) =>
// this will print `{hello: "world"}`
console.log(reply);
}
this.handleEvent("phxEventToJS", (payload) => {
// this will print `{abc: "xyz"}`
console.log(payload);
}
}
检查客户端-服务器通信部分可能很有用
here .
关于javascript - 如何从 javascript 与 liveview 正确通信,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62850762/
您好,我使用不同的域名来加载不同的数据集。我目前正在使用自定义插件根据主机名加载正确的域 ID。例如。在路由器之前的 endpoint.ex 中得到了这个: plug WebApp.DomainChe
问题 LiveView 折叠我打开的元素。 细节 我有一个元素在页面加载时开始折叠: ... # content updated by liveview 如果用户点击可折叠,则可折叠有一个类 .i
我有一个 Phoenix LiveView,其表单不受数据层支持,如下所示: 我无法使用变更集来支持表单,因为我没有使用 Ecto。提交表单后,提交处理正常,但是表单textar
我正在尝试将 WYSIWYG-Editor tinymce 与包含 textarea 字段的 phoenix LiveView 集成。在使用 LiveView 之前,我将其作为 node_module
在常规 Controller / View 中,假设我有 AppWeb.ItemView 和 AppWeb.ItemController。假设我有两个不同的索引,:index 和 :index_fun
我有一个 StreamBase 应用程序,用于查询数据并将其放入 .lvconf 表中。有没有办法从这个 .lvconf 表中获取数据,并在我的 JavaScript 中使用它来处理数据? 最佳答案
我在 Phoenix LiveView 中有一个带有 phx-submit 绑定(bind)的表单。可以通过单击“发送”按钮或按文本字段中的回车键来提交表单。 我的问题是,如果我通过按回车键提交表单,
首先,让我发布一些我通过 Google 发现的类似 SO 问题的链接。第一个链接似乎确实有一个有效的答案,但它并没有直接解决我的问题。第二个链接确实直接解决了我的问题,但 gdh 的回复似乎对我没有帮
抱歉,这篇文章很长,我试图提供所有信息并解释我已经尝试过的内容。 问题: 我将经典的 Phoenix View 放入实时 View 中。虽然一切看起来都很好,但 echart 一完成绘制就消失了。好像
我知道我可以通过包含以下内容来更新实时取景: if connected?(socket), do: :timer.send_interval(10000, self(), :click) 但是,有没有
我正在尝试在触发 Javascript 事件后使用 Javascript 更新 Liveview。 Liveview 必须显示 带有一些从 Javascript 发送的值的元素。 我的问题是:我应该如
您好 Phoenix LiveView 向导! 👋 上下文 我们有一个基本的 LiveView 计数器应用程序:https://github.com/dwyl/phoenix-liveview-co
我想使用以下功能将事件从 liveView 服务器发送到客户端: def handle_event("test", _, socket) do {:noreply, push_event(
我玩得很开心 still-beta Phoenix LiveView图书馆。我感到困惑的一件事是如何确保我的 LiveView 在发生异常时以可预测和透明的方式运行。 在传统的基于 HTTP 请求的世
我想使用以下功能将事件从 liveView 服务器发送到客户端: def handle_event("test", _, socket) do {:noreply, push_event(
我正在尝试实时显示 LiveView 图像。我在 Windows 下使用 EDSDK 2.14 + Qt5 + opencv+mingw32。我在图像处理方面不是很熟练,所以现在我遇到了以下问题。我使
我目前正在开发一个小型 Playgrounds 项目(适用于 macOS),我正在尝试将我自己的 View Controller 设置为实时 View 。以下行不起作用。 PlaygroundPage
是否有人拥有使用佳能 EDSDK 实现 LiveView 的示例 C 代码的工作片段?在您了解这一点之前,文档中的示例代码看起来很棒: // // Display image // 是的,就是这样。他
我正在尝试使用 Liveview 支持运行我的 Alloy 项目。但它不起作用并给我以下错误。 Appcelerator Command-Line Interface, version 5.2.2 C
我尝试在来自 appcelerator studio 的 iPhone 设备上以实时查看模式运行我的应用程序并收到错误: [LiveView] File Server unavailable. Hos
我是一名优秀的程序员,十分优秀!