- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
抱歉,这篇文章很长,我试图提供所有信息并解释我已经尝试过的内容。
问题:
我将经典的 Phoenix View 放入实时 View 中。虽然一切看起来都很好,但 echart 一完成绘制就消失了。好像没有办法找回来。
这是我的图表。如您所见,我也尝试将其与 phx:update
事件 Hook 。但这无济于事...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);
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, "/js/moment.min.js") %>"></script>
<script type="text/javascript" src="<%= Routes.static_path(DatabaumWeb.Endpoint, "/js/graph.js") %>"></script>
<div id="history_chart" style="width: 100%;height:50vh;"></div>
<div id="history_chart_data" data-series="<%= dataSeries(@ttnmessages, @graph_data) %>"></div>
<% end %>
defmodule AppWeb.ConsoleLive do
use Phoenix.LiveView
alias AppWeb.ConsoleView
alias App.API
def render(assigns) do
Phoenix.View.render(ConsoleView, "index.html", assigns)
end
@doc """
Graph
"""
def mount(session = %{params: %{"hardware_serial" => hardware_serial, "graph" => form}, user: current_user}, socket) do
AppWeb.Endpoint.subscribe("TtnMessages")
if connected?(socket), do: :timer.send_interval(1000, self(), :tick)
ttnmessages = API.list_ttnmessages(hardware_serial, form)
message = List.last(ttnmessages)
devices = API.list_message_devices(current_user)
device = API.get_device_by_serial(hardware_serial);
graph_data = form
|> Enum.reject(fn {_k, v} -> v != "true" end)
|> Enum.map(fn {k, _v} -> k end)
|> Enum.to_list()
session = Map.merge(session, %{
devices: devices,
ttnmessages: ttnmessages,
message: message,
device: device,
graph_data: graph_data,
message_ago: message_ago(message.inserted_at)
})
{:ok, assign(socket, session)}
end
#[Omitted two other mount methods, which are not called in this case]
# updates the info when the device has last been seen.
def handle_info(:tick, socket) do
message = socket.assigns[:message]
{:noreply, assign(socket, message_ago: message_ago(Map.get(message, :inserted_at)))}
end
#new message arrives, this is not responsible for my issue because this happens max. once per minute
def handle_info(%{event: "new", payload: %{message: message}} = a, socket) do
message = update_message(message, socket.assigns.message)
devices = Enum.map(socket.assigns.devices, &update_device(&1, message))
{:noreply, assign(socket, devices: devices, message: message)}
end
def handle_info(_broadcast, socket), do: {:noreply, socket}
# update the message if necessary
defp update_message(message = %{hardware_serial: hs}, socket_message = %{hardware_serial: hs}), do: message
defp update_message(_message, socket_message), do: socket_message
defp update_device(_device= %{hardware_serial: hs}, _message = %{hardware_serial: hs}), do: API.get_device_by_serial(hs)
defp update_device(device, _message), do: device
defp message_ago(nil), do: "never"
defp message_ago(date) do
{:ok, ago} = Timex.Format.DateTime.Formatters.Relative.relative_to(date, Timex.now(), "{relative}", "de")
ago
end
end
window.updateGraph()
确实
而不是 使图形重新出现,但会打印出
updating the graph...
。
最佳答案
正如 Chris McCord 提到的 on Github ,我不得不将 phx-update="ignore"
插入到图表 html 中。这解决了这个问题,让我很高兴。
关于Elixir Phoenix LiveView Echart 消失(消失),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58660655/
我正在尝试从模板中的列表( )中提取值,但出现此错误: lists in Phoenix.HTML and templates may only contain integers represent
我正在阅读 Programming Phoenix 这本书,一切都很好,直到第 44 页要求我重新启动 Phoenix 服务器。 我用双 Ctrl + C 杀死了当前服务器,但是当我尝试再次运行 mi
我的应用程序和 api json 请求以及常规 html 都可以工作。我的路由器.ex defmodule MyApp.Router do use MyApp.Web, :router pip
我想在模板中将对象呈现为 JSON。我试过: 但是我得到一个错误 protocol Phoenix.HTML.Safe not implemented for %Ecto.Changeset{...
在 phoenix 框架的 View 中,在 div 元素内生成两个 span 元素的方法是什么? 最佳答案 为了做到这一点,可以只使用一个数组并将其作为 div 标签的值传递给内部,如下所示: de
我从 Rails 迁移,并希望这能在我的模板中工作? hello world 似乎没有一个条件得到呈现。如何实现这一目标? 谢
完成示例指南。本章中详细介绍的内容在我的应用程序中不起作用。看起来很简单的事情。我有一个视频模型: defmodule Rumbl.Video do use Rumbl.Web, :model
完成示例指南。本章中详细介绍的内容在我的应用程序中不起作用。看起来很简单的事情。我有一个视频模型: defmodule Rumbl.Video do use Rumbl.Web, :model
通过可选“inputs_for”输入的 Phoenix 嵌套表单导致 Controller 中的 map 无法通过验证。例如,一个帖子有评论。如果我想在创建帖子时为帖子添加评论,嵌套表单将如下所示:
我正在尝试在应用程序中实现不同的语言。所以我所做的是在 Session 的 db 中创建了 lang 变量,它保留了当前选择的语言。 问题是我正在通过更新操作调用和更新值: def update(co
我想在我的网站上实现一个典型的“记住我”功能,它需要一种方法来创建在遥远的 future 过期的 cookie。有没有办法在 Phoenix Framework 中创建它们? 最佳答案 只要给 coo
我正在制作一个多站点应用程序。我想在测试 Controller 之前在连接上设置请求主机。在 Rails 中,我们可以使用 before :each do request.env["HTTP_RE
我知道我可以通过包含以下内容来更新实时取景: if connected?(socket), do: :timer.send_interval(10000, self(), :click) 但是,有没有
Ruby on Rails 带有终端命令 rake routes . Phoenix 有类似的吗? 最佳答案 命令是 $ mix phoenix.routes 关于phoenix-framework
我正在尝试使用 addict包以在我的项目中进行身份验证,但是每当我尝试执行操作(注册、登录...)时,我的 POST 都会出现 CrossDomain 错误。 我已经尝试添加 cors_plug包来
我在 Phoenix 项目,和mix ecto.create , mix ecto.migrate , 和 mix ecto.drop都发出相同的错误: $ mix ecto.drop ==> tzd
在我的帖子模型上,我实现了一个简单的验证 def changeset(model, params \\ :empty) do model |> cast(params, @requ
这主要是为了测试目的,但是我怎样才能在 Heroku 上实现与 mix ecto.reset 相同的效果。这样的命令导致 FATAL: permission denied for database "
我们的 Web 应用程序目前在 C# 中运行在 Windows 和 IIS 上。我们严重依赖此环境中包含的 Windows 身份验证方案。启用 Windows 身份验证后,我们可以检测连接用户的身份,
在我的 Phoenix 应用程序中,我想对单个记录运行 get_by() Ecto 查询 - 但是,我要搜索的字段之一应该评估为 nil ,但 Phoenix/Ecto 禁止使用 nil 作为比较运算
我是一名优秀的程序员,十分优秀!