Multi-row form serialization controller example

index.html.erb

<div class="col-12 mb-4" data-controller="rows">
  <%# these would usually be created by rendering a collection of partials: %>
  <div id="row_1">
    <form> <%# note that form is just a container %>
      <input type="text" name="rows[first]" /> <%# note that I used the Rails models[attribute] form %>
      <input type="text" name="rows[last]" />
      <button data-reflex="click->Rows#update" data-id="1">Update</button> <%# click event For The Win %>
      <button data-reflex="click->Rows#delete" data-id="1">Delete</button>
    </form>
  </div>
  <div id="row_2">
    <form>
      <input type="text" name="rows[first]" />
      <input type="text" name="rows[last]" />
      <button data-reflex="click->Rows#update" data-id="2">Update</button>
      <button data-reflex="click->Rows#delete" data-id="2">Delete</button>
    </form>
  </div>
</div>

rows_controller.js

import ApplicationController from './application_controller'

export default class extends ApplicationController {
  afterUpdate (element, reflex, noop, reflexId) {
    console.log('updated', element.dataset.id)
  }

  afterDelete (element, reflex, noop, reflexId) {
    console.log('deleted', element.dataset.id)
  }
}

rows_reflex.rb

class RowsReflex < ApplicationReflex
  def update
    # what i'd do if I really had a Row model:
    # row = Row.find(element["id"])
    # row.update(params[:rows])
    puts params[:rows][:first]
    morph :nothing
  end

  def delete
    # what i'd do if I really had a Row model:
    # row = Row.find(element["id"])
    # cable_ready.remove(selector: dom_id(row))
    # row.destroy

    # what I *actually* did for this example:
    cable_ready.remove(selector: "#row_#{element["data-id"]}")
    morph :nothing
  end
end