动态嵌套form，使用Stimulus Js库（前后端不分离）

我的git代码：https://github.com/chentianwei411/nested_form-Stimulus-

Stimulus: https://www.cnblogs.com/chentianwei/p/9806875.html

开始：

rails new -m ../jumpstart,\ Gorails视频\(创建一个rails模版\)/template.rb -d postgresql nested_forms

rails webpacker:install:stimulus

在_header.html.erb内添加：

使用javascript_pack_tag方法添加JS pack到Rails views

<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

然后修改文件名：

mv app/javascript/controllers/{hello.nested_form}_controller.js

创建手脚架和模型：

rails g scaffold Project name description

rails g model Task description project:belongs_to

rails db:migrate

产生：

  create_table "projects", force: :cascade do |t|

    t.string "name"

    t.string "description"

    t.datetime "created_at", null: false

    t.datetime "updated_at", null: false

  end

  create_table "tasks", force: :cascade do |t|

    t.string "description"

    t.datetime "created_at", null: false

    t.datetime "updated_at", null: false

    t.bigint "project_id"

    t.index ["project_id"], name: "index_tasks_on_project_id"

  end

嵌套结构的类方法使用：

class Project < ApplicationRecord

  has_many :tasks, inverse_of: :project

  accepts_nested_attributes_for :tasks, reject_if: :all_blank, allow_destroy: true

end

具体解释见博客：

ActiveRecord Nested Atrributes 关联记录，对嵌套属性进行CURD

Rails-Treasure chest2 嵌套表单；

controller内添加属性白名单：

    def project_params

      params.require(:project).permit(:name, :description, tasks_attributes: [:id, :description, :_destroy])

    end

然后在view视图_form.html.erb上添加一个嵌套的form builder：

  <h4>Tasks</h4>

  <%= form.fields_for :tasks do |task| %>

    <div class="form-group">

      <%= task.label :description %>

      <%= task.text_field :description, class: 'form-control'%>

    </div>

  <% end %>

使用#fields_for(record_name, record_object = nil, &block)，创建一个scope在一个指定的model对象如form_for,但是不创建自身的form tags。它用于在一个form内创建额外的model对象。(具体见api文档)

修改project_controller，添加语句@project.tasks.new。或者设置视图中的#fields_for方法的第2个参数record_object为Task.new

  def new

    @project = Project.new

    @project.tasks.new

  end

⚠️：重构视图，可以把fields_for方法的块block提取出来。_nest.html.erb

使用template标签，让JavaScript决定是否显示在页面。配合使用stimulus.js。

  <template>

    <%= form.fields_for :tasks, Task.new, child_index: 'New_RECORD' do |task| %>

      <%= render 'nest', form: task%>

    <% end %>

  </template>

child_index: 'New_RECORD' 即子索引的名字，会在label,input标签的for，name, id属性上使用到：

<div class="form-group">

  <label for="project_tasks_attributes_New_RECORD_description">Description</label>

  <input class="form-control" type="text" name="project[tasks_attributes][New_RECORD][description]" id="project_tasks_attributes_New_RECORD_description">

</div>

视图的最终代码：

data-controller调用js文件中的类对象实例化的对象
data-target, 用于取对应元素。
data-action，用于绑定事件。这里使用了link_to视图方法。

  <div data-controller="nested-form">

    <template data-target="nested-form.template">

      <%= form.fields_for :tasks, Task.new, child_index: 'New_RECORD' do |task| %>

        <%= render 'nest', form: task%>

      <% end %>

    </template>

    <%= form.fields_for :tasks do |task| %>

      <%= render 'nest', form: task%>

    <% end %>

    <div class="mb-3" data-target='nested-form.links'>

      <%= link_to 'Add Task', '#', class: 'btn btn-outline-primary', data: {action: 'click->nested-form#add_association'} %>

    </div>

  </div>

nested_form_controller.rb

export default class extends Controller {

  static targets = [ "links", "template" ]

  connect() {

  }

  add_association(event) {

    event.preventDefault()

    var content = this.templateTarget.innerHTML.replace(/New_RECORD/g, new Date().getTime())

    this.linksTargets.insertAdjacentHTML('beforebegin', content)

  }

}

⚠️这里用到js库的2个方法replace和insertAdjacentHTML用于对元素内容操作和元素节点的插入。
视图上的最终代码：
<input class="form-control" type="text" name="project[tasks_attributes][1554196211709][description]" id="project_tasks_attributes_1554196211709_description">

功能：增加task，还可以删除task。

在_nest.html.erb表格内增加一个"Remove"连接按钮。

<%= content_tag :div, class:'nested-fields', data: {new_record: form.object.new_record?}  do %>

  <div class="form-group">

    <%= form.label :description %>

    <%= form.text_field :description, class: 'form-control'%>

    <small><%= link_to "REMOVE", "#", data: {action: "click->nested-form#remove_association"}%></small>

    <!-- <%= form.hidden_field :_destroy%> -->

  </div>

<% end %>

data-new-record用于判断是不是新建数据。

添加一个data-action绑定事件remove_association。

再看nested_form_controller.js,添加事件：

  remove_association(event) {

    event.preventDefault()

    let wrapper = event.target.closest(".nested-fields")   #有nest-fileds类的元素

    if (wrapper.dataset.newRecord == "true") {

      wrapper.remove()

    } else {

      console.log("不能删除")

    }

  }

注意：

dataset属性提供了读写所有客制化的data属性 data-*

考虑到edit界面，有已经添加的task和新增的task，所以要区分，新增的直接从nom树移除，已经添加的则要发出删除请求。

修改上面的代码：

_nest.html.erb内添加一个input标签，并隐藏。它的用途是标记作用！

在js中添加2行代码：

找到这个input标签，并设置value等于1或者true, 这样更新时，会自动判断是否删除。
从节点树上隐藏这个元素。CSS#display属性设置none。

  remove_association(event) {

    event.preventDefault()

    let wrapper = event.target.closest(".nested-fields")

    if (wrapper.dataset.newRecord == "true") {

      wrapper.remove()

    } else {

      wrapper.querySelector("input[name*='_destroy']").value = true

      wrapper.style.display = 'none'

    }

  }

巴特西

动态嵌套form，使用Stimulus Js库（前后端不分离）

开始：

ActiveRecord Nested Atrributes 关联记录，对嵌套属性进行CURD

Rails-Treasure chest2 嵌套表单；

最新文章

热门文章