rails6 – 在Rails中使用simple_form,nested_form和Bootstrap内联添加控件

大家在rails项目中使用simple_form,nested_form概率还是比较大,这两个Gem确实好用,在新项目中用的rails6.0和之前rails4还是有点不同,记录下这两个Gem的使用方法
simple_form的使用点击下面的链接,查看README
https://github.com/heartcombo/simple_form

nested_form
https://github.com/ryanb/nested_form
将它添加到你的Gemfile,然后运行 bundle 安装它

gem "nested_form"

安装资源包

yarn add jquery_nested_form

然后将它添加到 application.js file:的资产管道中

import 'jquery_nested_form'

不使用webpack方式,则用一下方式进行引用

如果不使用资产管道,请运行这里生成器来创建JavaScript文件

rails g nested_form:install

然后你可以在你的布局中包含生成的JavaScript。

<%= javascript_include_tag :defaults, "nested_form"%>

用法

假设你有一个 Project 模型,。 要想使用这个 gem,你需要添加 accepts_nested_attributes_for :tasks 对于项目模型,如果希望将嵌套对象销毁,则将 :allow_destroy => true 选项添加到该声明中。 有关所有可用选项的详细信息,请参阅 accepts_nested_attributes_for文档。

这将创建一个 tasks_attributes= 方法,因此你可能需要将它添加到 attr_accessible array ( attr_accessible :tasks_attributes )。

然后使用 nested_form_for helper 方法启用嵌套。

<%= nested_form_for @project do |f| %>

然后,你将能够在表单生成器中使用 link_to_add 和 link_to_remove helper 方法结合使用fields_for动态添加/删除嵌套的记录。

<%= f.fields_for :tasks do |task_form| %>
  <%= task_form.text_field :name%>
  <%= task_form.link_to_remove "Remove this task"%>
<% end %>

<%= f.link_to_add "Add a task", :tasks%>

在controller中添加

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

SimpleForm和Formtastic支持

分别使用 simple_nested_form_for 或者 semantic_nested_form_for 进行SimpleForm和Formtastic支持。

通常需要将嵌套字段移动到部分以保持组织有序。 如果你不向fields_for提供 block,它将查找部分并使用。

<%= f.fields_for :tasks%>

指定嵌套字段的目标

默认情况下,link_to_add 在单击链接前附加字段。 在使用列表或者表时,这是不可取的,例如。 在这些情况下,"数据目标"属性可以用于指定插入新字段的位置。


 <%= f.fields_for :tasks, :wrapper => false do |task_form| %>
 
 <%end%>
<%= task_form.text_field :name%> <%= task_form.link_to_remove "Remove this task"%>

<%= f.link_to_add "Add a task", :tasks, :data => { :target => "#tasks" } %>

你可能感兴趣的:(rails6 – 在Rails中使用simple_form,nested_form和Bootstrap内联添加控件)