Question

如何在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

Answer 1

您可以尝试在视图中呈现该值以构建HTML属性，然后使用您的JavaScript获取此属性，这是相当常见的实践。

这样的事情可以做到：

my_view.eex

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

的script.js

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

您可以找到有关data here

的更多信息

希望有所帮助！

Answer 2

您可以使用PhoenixGon它将所有凤凰变量带到窗口范围，您可以使用所有这些变量，并且还生成获取此变量的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模块中使用它：

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

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

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

2 个答案: