Size: a a a

2021 January 27

VI

Victor Istratii in pro.elixir
нечто вроде этого
источник

VI

Victor Istratii in pro.elixir
прошу прощения, не handle-call а handle-event, напутал с GenServer :D
источник

AN

Alexey Novoselov in pro.elixir
Victor Istratii
# show.html.leex

<form id="numbers_form" phx-change="select_numbers_event">
 <table class="view-board__panel-table">
   <tr>
     <th>Number</th>
     <th>Status</th>
     <th>Inserted At</th>
     <th>Select</th>
   </tr>

   <%= for n <- @numbers do %>
     <tr>
       <td> <%= n.number %> </td>
       <td> Active </td>
       <td> <%= n.inserted_at %> </td>
       <td>
         <label class="container">
           <%= inspect(n.checked) %>
           <%= inspect(n.id) %>
           <%= get_check_box(n.checked, n.id) %>
         </label>
       </td>
     </tr>
   <%end %>
 </table>
</form>


# number_view.ex

def get_check_box(checked, n_id) do
 ch =
   case checked do
     true -> "checked"
     _ -> ""
   end

 "<input #{ch} type=\"checkbox\"
   id=\"input_n_checkbox\"
   name=\"id\" value=\"#{n_id}\">
  <span class=\"checkmark\"></span>"
 |> Phoenix.HTML.raw()
end


# show.ex

def handle_event("select_numbers_event", %{"id" => id}, socket) do
 updated_numbers = socket.assigns._numbers
 |> Enum.map(fn n ->
   if n.id == String.to_integer(id) do
     Map.put(n, :checked, not n.checked)
   else
     n
   end
 end)

 new_socket =
   socket
   |> assign(:virtual_numbers, updated_numbers)
   
 {:noreply, new_socket}
end
phx_value_id: n_id
источник

VI

Victor Istratii in pro.elixir
боюсь, ничего не измегилось, socket.assigns.numbers все так же содержит структуру а-ля %{"id" => 900}
источник

AN

Alexey Novoselov in pro.elixir
Victor Istratii
боюсь, ничего не измегилось, socket.assigns.numbers все так же содержит структуру а-ля %{"id" => 900}
что у тебя там за id только фениксу известно, но phx-value-* нужен https://hexdocs.pm/phoenix_live_view/bindings.html#click-events
источник

VI

Victor Istratii in pro.elixir
id принадлежит структуре, которая гипотетически афишируется у меня на веб странице. ее как раз id и привязан к чекбоксу — это было сделано для того, чтобы в assigns всегда было известно какие чекбоксы выбраны и какие нет.

к слову, этот phx-value-* является обязательным также и для phx-change?
источник

AN

Alexey Novoselov in pro.elixir
Victor Istratii
id принадлежит структуре, которая гипотетически афишируется у меня на веб странице. ее как раз id и привязан к чекбоксу — это было сделано для того, чтобы в assigns всегда было известно какие чекбоксы выбраны и какие нет.

к слову, этот phx-value-* является обязательным также и для phx-change?
с сервера на клиент даныые передаются через assign, с клиента на сервер через phx-value-*="..." всегда строками
источник

M

Maxim in pro.elixir
Victor Istratii
Ребята, у кого-то бывали проблемы с чекбоксами в LiveView? Конкретно заступорился в данной ситуации:
Допустим афишируется несколько структур, у каждой из них свой чекбокс для удаления. То есть, выставляя галочку возле первой структуры, handle-call получает как параметр id => 1, если пометить вторую, то id => 2. В данной ситуации, я ожидаю что, если убрать галочку возле второй структуры, handle-call опять же получит id => 2, потому что этот элемент был изменен только что. Однако я заметил, что при убирании галочки с чекбокса при наличии других активных чекбоксов, handle-call получает в качестве параметра не айдишник анчекнутого только что бокса, а айдишник предыдущего чекнутого бокса какого-то фига :/
Быть может, я неверно понимаю как работает phx-change в работе с формами?
это страндартное поведение формы, отправляются только те чекбоксы, которые были выбраны (чекнуты в вашем контексте)
источник

M

Maxim in pro.elixir
есть хак с таким же инпут филдом только hidden - если надо получать все айдишники

пример:

<input type="hidden" name="categories[<%= @category.id %>]" value="deleted">
<input type="checkbox"
      name="categories[<%= @category.id %>]"
      value="<%= @category.name %>"
      <%= if @checked, do: "checked"%>>
источник

VI

Victor Istratii in pro.elixir
Maxim
это страндартное поведение формы, отправляются только те чекбоксы, которые были выбраны (чекнуты в вашем контексте)
однако это кажется мне немного странным...
конкретно в моем случае происходит нечто вроде этого:

struct 1 |_|
struct 2 |x|
struct 3 |x|
struct 4 |x| <- допустим это последний чекнутый бокс. handle_event триггерится и получает “id” => struct_4.id
если же я уберу галочку, то бишь будет нечто вроде


struct 1 |_|
struct 2 |x|
struct 3 |x|
struct 4 |_| <- handle_event получает не ВСЕ чекнутые айдишники на данный момент, а вот это “id” => struct_3.id
источник

M

Maxim in pro.elixir
Victor Istratii
однако это кажется мне немного странным...
конкретно в моем случае происходит нечто вроде этого:

struct 1 |_|
struct 2 |x|
struct 3 |x|
struct 4 |x| <- допустим это последний чекнутый бокс. handle_event триггерится и получает “id” => struct_4.id
если же я уберу галочку, то бишь будет нечто вроде


struct 1 |_|
struct 2 |x|
struct 3 |x|
struct 4 |_| <- handle_event получает не ВСЕ чекнутые айдишники на данный момент, а вот это “id” => struct_3.id
а ну да - ты ж отправляешь не массив
источник

VI

Victor Istratii in pro.elixir
то есть я ожидал получить некий дифф между первым и вторым состоянием, а в итоге получил предыдущий активный чекбокс
источник

M

Maxim in pro.elixir
"<input #{ch} type=\"checkbox\"
   id=\"input_n_checkbox\"
   name=\"id
[]\" value=\"#{n_id}\">
  <span class=\"checkmark\"></span>"
 |> Phoenix.HTML.raw()
источник

M

Maxim in pro.elixir
обрати внивание на name
источник

M

Maxim in pro.elixir
я добавил массив
источник

M

Maxim in pro.elixir
он просто перезаписывает последнее значение в твоем случае
источник

M

Maxim in pro.elixir
Maxim
"<input #{ch} type=\"checkbox\"
   id=\"input_n_checkbox\"
   name=\"id
[]\" value=\"#{n_id}\">
  <span class=\"checkmark\"></span>"
 |> Phoenix.HTML.raw()
кстати ты можешь использловать сигл E чтоб не делать каждый раз Phoenix.HTML.raw()

~E"""
    <input #{ch} type=\"checkbox\"
   id=\"input_n_checkbox\"
   name=\"id
[]\" value=\"#{n_id}\">
  <span class=\"checkmark\"></span>

"""
источник

VI

Victor Istratii in pro.elixir
сейчас попробуем
источник

LL

Lama Lover in pro.elixir
Maxim
кстати ты можешь использловать сигл E чтоб не делать каждый раз Phoenix.HTML.raw()

~E"""
    <input #{ch} type=\"checkbox\"
   id=\"input_n_checkbox\"
   name=\"id
[]\" value=\"#{n_id}\">
  <span class=\"checkmark\"></span>

"""
С сигилом ещё и не нужно экранировать двойные кавычки
источник

M

Maxim in pro.elixir
либо лучше даже text_input хелпер https://hexdocs.pm/phoenix_html/Phoenix.HTML.Form.html#text_input/3
источник