时间戳

首页 > 解决方案 > 指定嵌套 Phoenix 表单字段的顺序

elixir - 指定嵌套 Phoenix 表单字段的顺序

问题描述

我正在设置一个带有嵌套字段的表单，如何指定字段的顺序，以便它们不会组合在一起。

我可以用它inputs_for来显示嵌套字段，但是它会一次显示它们。我想以动态顺序显示它们。

例如：

<%= inputs_for f, :apples, fn fa -> %>
  <%= label fa, :name %>
  <%= text_input fa, :name %>
  <%= error_tag fa, :name %>
<% end %>

<%= inputs_for f, :oranges, fn fo -> %>
  <%= label fo, :name %>
  <%= text_input fo, :name %>
  <%= error_tag fo, :name %>
<% end %>

这将为每个嵌套关联将所有 apples 和 oranges 字段组合在一起。因此，对于 2 个苹果和 3 个橙子，它将显示：

-苹果

-苹果

-橙

-橙

-橙

我想要的是将它们显示为：

-苹果

-橙子

-苹果

-橙子

-橙子

标签： elixirecto

解决方案

您可以访问 from 中的数据，它以表单变量的形式传递给form_for/4. 因此，您可以创建一个采用这种形式的函数，对您的苹果和橙子进行排序和组合，然后将它们与您的排序一起呈现。

<%= form_for @settings, Routes.config_path(@conn, :save), fn f -> %>
    <%= render_apples_and_oranges(f) %>
<% end %>

然后在你的视图文件中定义函数render_apples_and_oranges\1

  def apples_and_oranges(%{data: %{apples: apples, oranges: oranges}} = form) do
    # Sort and combine apples and oranges
    render("apples_oranges_field_template.html", form: form, apples_and_oranges: sorted_apples_and_oranges)
  end

然后创建用于渲染苹果和橙子的新模板：

<%= for field <- @fields do %>
    <%= text_input(@form, field.name, value: field.value %>
<% end %>

推荐阅读