首页
/ Awesome Nested Fields 项目技术文档

Awesome Nested Fields 项目技术文档

2024-12-18 09:53:03作者:翟萌耘Ralph

1. 安装指南

Rails 3.1

  1. Gemfile 中添加以下内容,并运行 bundle install 以确保 gem 安装成功:

    gem 'awesome_nested_fields'
    
  2. app/assets/javascripts/application.js 文件中添加以下内容,以确保 JavaScript 依赖项被添加到 asset pipeline 中。请确保在 jQuery 和 jQuery UJS Adapter 之后添加此行:

    //= require jquery.nested-fields
    
  3. 现在你可以开始使用 awesome 嵌套模型了。

Rails 3.0

  1. Gemfile 中添加以下内容,并运行 bundle install 以确保 gem 安装成功。请确保在 jquery-rails 之后添加此行,以确保 JavaScript 文件按正确顺序添加到模板中:

    gem 'awesome_nested_fields'
    
  2. 使用生成器将 JavaScript 依赖项复制到 public/javascripts 目录:

    rails generate awesome_nested_fields:install
    
  3. (可选)JavaScript 依赖项将自动添加到默认的 JavaScript 文件中。如果你在模板中没有使用 javascript_include_tag :defaults,请手动引入文件:

    <script src="/javascripts/jquery.nested-fields.min.js" type="text/javascript"></script>
    
  4. 现在你可以开始使用 awesome 嵌套模型了。

2. 项目使用说明

模型设置

首先,确保具有 has_manyhas_and_belongs_to_many 关系的对象接受嵌套属性的集合。例如,如果一个 Person 模型有多个 Phone 模型,可以这样设置:

class Person < ActiveRecord::Base
  has_many :phones
  accepts_nested_attributes_for :phones, allow_destroy: true
end

accepts_nested_attributes_for 是 Active Record 的一个方法,允许你直接将嵌套模型的属性传递给父模型,而不是单独实例化每个子对象。

视图设置

接下来,在表单视图中使用 nested_fields_for 方法。它接收关联或集合名称、可选的选项哈希以及包含嵌套字段的块。例如:

<%= form_for(@person) do |f| %>
  <% # person fields... %>

  <h2>Phones</h2>
  <div class="items">
    <%= f.nested_fields_for :phones do |f| %>
      <fieldset class="item">
        <%= f.label :number %>
        <%= f.text_field :number %>

        <a href="#" class="remove">remove</a>

        <%= f.hidden_field :id %>
        <%= f.hidden_field :_destroy %>
      </fieldset>
    <% end %>
  </div>
  <a href="#" class="add">add phone</a>

  <% # more person fields... %>
<% end %>

nested_fields_for 方法列出了该 Person 拥有的 Phone,并添加了一个空的模板用于创建新的 Phone

JavaScript 设置

最后,在页面加载时激活嵌套字段操作。可以在 application.js 文件中添加以下内容:

$(document).ready(function(e) {
  $('FORM').nestedFields();
});

3. 项目API使用文档

视图选项

show_empty

有时你可能希望在集合为空时显示一些内容。只需将 show_empty 设置为 true,并在块中处理 nil 情况:

<%= f.nested_fields_for :phones, show_empty: true do |f| %>
  <% if f %>
    <% fields code... %>
  <% else %>
    <p class="empty">There are no phones.</p>
  <% end %>
<% end %>

JavaScript 选项

选择器

为了使嵌套字段动态工作,JavaScript 代码需要知道要使用的元素。默认情况下,这是通过用 CSS 类标记关键元素来完成的,但你也可以使用其他选择器:

  • itemSelector:标记集合中的每个项(默认 .item
  • containerSelector:标记包含项的元素(默认 .items
  • addSelector:标记用于添加新项的元素(默认 .add
  • removeSelector:标记用于删除项的元素(默认 .remove
  • emptySelector:标记在没有任何项时显示的元素(默认 .empty

回调函数

可以在项插入或删除之前或之后执行操作。有四个回调函数可用:beforeInsertafterInsertbeforeRemoveafterRemove。所有回调函数都接收项作为第一个参数:

element.nestedFields({
  beforeInsert: function(item) {
    item.css('color', 'red'); // 执行某些操作
    console.log(item + ' will be inserted.')
  },
  afterRemove: function(item) {
    console.log(item + ' was removed.');
  }
});

4. 项目安装方式

项目的安装方式已在“安装指南”部分详细说明。请根据你的 Rails 版本选择相应的安装步骤。

热门项目推荐
相关项目推荐

项目优选

收起
open-eBackupopen-eBackup
open-eBackup是一款开源备份软件,采用集群高扩展架构,通过应用备份通用框架、并行备份等技术,为主流数据库、虚拟化、文件系统、大数据等应用提供E2E的数据备份、恢复等能力,帮助用户实现关键数据高效保护。
HTML
74
55
openHiTLSopenHiTLS
旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件,通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求,让密码技术应用更简单,同时探索后量子等先进算法创新实践,构建密码前沿技术底座!
C
51
39
HarmonyOS-ExamplesHarmonyOS-Examples
本仓将收集和展示仓颉鸿蒙应用示例代码,欢迎大家投稿,在仓颉鸿蒙社区展现你的妙趣设计!
Cangjie
258
66
mybatis-plusmybatis-plus
mybatis 增强工具包,简化 CRUD 操作。 文档 http://baomidou.com 低代码组件库 http://aizuda.com
Java
21
0
Cangjie-ExamplesCangjie-Examples
本仓将收集和展示高质量的仓颉示例代码,欢迎大家投稿,让全世界看到您的妙趣设计,也让更多人通过您的编码理解和喜爱仓颉语言。
Cangjie
177
41
advanced-javaadvanced-java
Advanced-Java是一个Java进阶教程,适合用于学习Java高级特性和编程技巧。特点:内容深入、实例丰富、适合进阶学习。
JavaScript
400
103
RuoYi-VueRuoYi-Vue
🎉 基于SpringBoot,Spring Security,JWT,Vue & Element 的前后端分离权限管理系统,同时提供了 Vue3 的版本
Java
168
37
RuoYi-Cloud-Vue3RuoYi-Cloud-Vue3
🎉 基于Spring Boot、Spring Cloud & Alibaba、Vue3 & Vite、Element Plus的分布式前后端分离微服务架构权限管理系统
Vue
26
18
hyperionhyperion
仓颉语言实现的TCP通信框架,支持添加自定义编解码器,积木式添加IoFilter处理入栈出栈消息。仓颉redis-sdk和activemq4cj项目使用了该框架。
Cangjie
113
16
CangjieCommunityCangjieCommunity
为仓颉编程语言开发者打造活跃、开放、高质量的社区环境
Markdown
892
0