如何在 JavaScript 中使用 Phoenix 控制器变量？

IT技术 reactjs elixir phoenix-framework
2021-05-22 03:40:57

如何在 JavaScript 中使用来自 Phoenix 控制器的变量？

我正在使用 React 作为前端。

我不能<%= ... %>在 JavaScript 中使用。

defmodule Familytree.PageController do
  use Familytree.Web, :controller

  alias Familytree.Users
  alias Familytree.Tags
  alias Familytree.UserTag

  plug Familytree.Plugs.Auth
  plug :scrub_params, "users" when action in [:create, :update]
  plug :scrub_params, "tags" when action in [:add_tag,:delete_tag]

  def index(conn, _params) do
    users = Repo.all(Users)
    tags = Repo.all(Tags)
    render(conn, "index.html", users: users, tags: tags, current_user: get_session(conn, :current_user))
  end
end
2个回答

您可以尝试渲染视图中的值以构建 HTML 属性，然后使用您的 JavaScript 获取它，这是相当常见的做法。

这样的事情可以做：

my_view.eex

<div data-name="<%= @some_name_from_controller %>" id="component">
</div>

脚本.js

var name = $("#component").data("name");

你可以在这里找到更多关于data

希望有帮助！

您可以使用PhoenixGon将所有 phoenix 变量带到窗口范围内，您可以使用所有这些变量，它还生成用于获取此变量的 js 方法：

def index(conn, _params) do
  put_gon(conn, [users: Repo.all(Users), tags: Repo.all(Tags)])
  render(conn, "index.html", current_user: get_session(conn, :current_user))
end

并从浏览器控制台或在 javascript module中使用它：

window.Gon.getAsset('users')
// => [user, user1 ...]

它还有助于将 js vars 和 html.eex vars 保持在不同的部分并保持清晰。

其它你可能感兴趣的问题
上一篇为什么 React 需要 webpack-dev-server 来运行？ 下一篇Redux with React - 与组件共享商店的正确方式