Лучшая практика для передачи данных из Феникса в Javascript

elixir phoenix-framework

2875 просмотра

4 ответа

Я вижу 3 способа сделать это.

  1. Использование <%= %>внутри <script>в*.html.eex
  2. Используйте каналы для передачи данных в Javascript
  3. Построить JSON API

# 1 кажется самым простым, но я не мог найти или придумать хороший способ сделать это еще.

Примечание: обновление в реальном времени не является моим требованием.

Автор: Charles Han Источник Размещён: 08.11.2019 11:04

Ответы (4)


3 плюса

(2) не очень хорошая идея, если вы не хотите обновлений в реальном времени. (3) может быть слишком излишне сложным, если вы не хотите загружать данные с помощью AJAX. Вы должны использовать (1), если вам просто нужно, чтобы некоторые данные были доступны из JS, и вы не хотите изменять их без перезагрузки всей страницы.

Так как действительный JSON также является действительным JS, вы можете просто использовать Poison.encode!(). Если ваши данные в @posts, вы можете сделать это в *.html.eex:

<script>
  var POSTS = <%= Poison.encode!(@posts) %>;
</script>

и затем загрузите другой JS после этого и получите доступ к сообщениям, используя глобальную POSTSпеременную. (Возможно, вы захотите поместить пространство имен в нечто вроде App.posts = ...:

<script>
  var App = window.App || {};
  App.posts = <%= Poison.encode!(@posts) %>;
</script>

Убедитесь, что @postsсодержатся только те данные, которые можно преобразовать в JSON (без кортежей), и есть только те поля, которые пользователь может видеть.

Автор: Dogbert Размещён: 20.08.2016 08:46

3 плюса

Я бы никогда не использовал <script></script>для этого, в моих проектах у меня есть этот шаблон:

<!-- Layout -->
<div id="config"
  data-environment="..."
></div>

Я всегда предоставляю текущую среду в мастер-макете, у меня есть config.jsфайл с правильными данными для правильной среды.

Когда мне нужно передать некоторые данные в мой JavaScript, я делаю что-то подобное на мой взгляд:

<div id="app"
  data-users="..."
  data-zombies="..."
  ...
></div>

Если вы абстрагируете это с помощью некоторых помощников (сторона эликсира), вы можете сделать:

<%= App.Helpers.make_html(:app, [users: @users, zombies: @zombies]) %>

На стороне JavaScript, когда я загружаю страницу, я просто извлекаю data-атрибуты и устанавливаю их в переменную optionsдля текущего контроллера:

class ZombieController extends Controller

  setup: ->

    console.log(@options) # I have all the data there.

    # I can do 
    zombies = @options.zombies

Ну, это всего лишь пример, и вы должны адаптировать его для своего текущего проекта. Ключ к абстракции.

Надеюсь, это поможет :)

Автор: Jeremie Ges Размещён: 26.08.2016 02:24

1 плюс

Лучшая практика зависит от вашего интерфейса.

Если вы в основном обслуживаете HTML с дриблами javascript. Внедрить данные в HTML или через скрипт скрипт

Если вы строите реагирующий / угловой / внешний интерфейс, подумайте об использовании API и / или каналов.

В общем, если это важное веб-приложение, требующее манипулирования данными с помощью javascript, я бы пошел по маршруту API / Channel.

Автор: Keith Nicholas Размещён: 26.08.2016 02:35

1 плюс

Также вы можете использовать шестнадцатеричный PhoenixGon, он использует первый способ для передачи переменных Phoenix в Javascript. Он берет все переменные из контроллера и Mix.env и генерирует <script>тег с визуализацией JSONи методы для доступа к этим данным. Смотрите другие ответы здесь . Это как:

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

И в коде JS:

window.Gon.getAsset('users') #=> [user list]
windoe.Gon.isDev() # => true

И вам не нужно создавать @vars и держать это в чистоте.

И для zommbies.coffee:

class ZombieController extends Controller

  setup: ->

    zombies = window.Gon.getAsset('zombies')
Автор: khusnetdinov Размещён: 25.04.2017 05:47
Вопросы из категории :
32x32