在 Rails 中动态添加字段,无需嵌套属性

2024-02-15

我正处于创建应用程序的早期阶段,只是放置一些基本代码。这是当前的代码...

应用程序/视图/卡片/front.html.erb

<%= form_for(front_of_card_path) do |f| %>
  <%= f.fields_for :competency_templates do |builder| %>
    <%= render 'add_fields', f: builder %>
  <% end %>
  <%= link_to_add_fields "Add New Tag", f, :skill %>
<% end %>

routes

 controller :cards do
    get  '/front',            action: 'front',  as: 'front_of_card'
    post '/save',             action: 'create', as: 'save_card'
    get  '/my_contact_info',  action: 'back',   as: 'back_of_card'
    put  '/save',             action: 'update', as: 'save_card'
    get  '/my_card',          action: 'show',   as: 'card'
  end

控制器

  def create
    @skill= Skill.new(params[:skill])
    @tag = Tag.new(params[:tag])
    @tag.save
    @skill.tag_id = @tag.id
    @skill.save
    redirect_to front_of_card_path, notice: 'Skill was successfully created.'
    #get user/session
    #save skills & tags
  end

卡.js.咖啡

jQuery ->
  $('form').on 'click', '.remove_fields', (event) ->
    $(this).prev('input[type=hidden]').val('1')
    $(this).closest('fieldset').hide()
    event.preventDefault()

  $('form').on 'click', '.add_fields', (event) ->
    time = new Date().getTime()
    regexp = new RegExp($(this).data('id'), 'g')
    $(this).before($(this).data('fields').replace(regexp, time))
    event.preventDefault()

应用程序助手

module ApplicationHelper
  def link_to_add_fields(name, f, association)
    new_object = f.object.send(association).klass.new
    id = new_object.object_id
    fields = f.fields_for(association, new_object, child_index: id) do |builder|
      render(association.to_s.singularize + "_fields", f: builder)
    end
    link_to(name, '#', class: "add_fields", data: {id: id, fields: fields.gsub("\n", "")})
  end
end

所以现在这段代码给了我两个文本字段。一个用于标签名称,另一个用于标签权重,控制器将所有内容插入数据库中。我想使用一些 JavaScript 来动态添加任意数量的标签/权重字段。我发现的所有内容似乎都集中在嵌套属性上。任何想法表示赞赏。

Update

添加了更多代码来充实这一点。我遇到的问题是我在这一行传递的第三个变量......

  <%= link_to_add_fields "Add New Tag", f, :skill %>

它不喜欢“:skill”,但我不确定我应该在这里传递什么。


这就是我想出的...这是我的两个模型...

class Skill < ActiveRecord::Base
  belongs_to :tag
  attr_accessible :tag_id, :weight
end

class Tag < ActiveRecord::Base
  has_many :skills
  attr_accessible :name
end

我正在从 app/views/skills/_form.html.erb 调用部分内容,并使用 js 标签添加新字段。另请注意,我正在重新渲染部分,然后将其隐藏在最后一个 div 标签中。

  <div id="skillSet">
    <%= render partial: "skills_form" %>

  </div>
  <a href="javascript:;" id="addNewTag">Add New Tag</a>

  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

<div class="hide" id="new_skills_form">
  <%= render partial: "skills_form", locals: {skill: false} %>
</div>

部分非常简单。我在这里所做的就是将值存储在数组中......

<div class="skillsForm">
  <%= label_tag 'tag' %>
  <%= text_field_tag 'tags[]' %>
  <%= label_tag 'weight' %>
  <%= text_field_tag 'weights[]' %>
</div>

...这里是 javascript...真正简单,只需说当单击 #addNewTag 时,将 #new_skills_form 添加到 #skillSet

$(document).ready(function(){
  $("#addNewTag").click(function(){
    $("#skillSet").append($("#new_skills_form").html());
  });
});

...最后控制器操作解构数组并保存它们...

def create
    @skill = Skill.new(params[:skill])
    tags = params[:tags]
    weights = params[:weights]

    tags.each_with_index do |tag, index|
      tag = Tag.create :name => tag
      Skill.create :tag_id => tag.id, :weight => weights[index]
    end
  end
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 Rails 中动态添加字段,无需嵌套属性 的相关文章

  • model.save() 返回无效输出

    我正在使用本文中的 Node js mongodb 和express 对 REST Api 进行简单测试 MERN 第一部分 使用 Node js 和 Express 构建 RESTful API https medium com week
  • nuxt如何访问javascript文件中的env

    我无法在 nuxt 2 15 之外访问我的环境变量 当我部署时我可以看到 nuxt context config在浏览器中有正确的变量 但在自定义js文件中我无法访问process env baseURL它返回未定义 nuxt config
  • 从heroku 提取数据库失败并出现 Encoding::CompatibilityError

    我在执行 db pull 从 heroku 回到本地开发环境时遇到一些问题 我的设置是通过 RVM 在 Mac OS X Snow Leopard 下的本地 Rails 3 Ruby 1 9 2 环境上通过 MacPorts 安装 MySQ
  • 克隆元素对应表单中所有元素的事件

    我成功克隆了表行 其中包含从数据库检索的值 不过我对它没有什么问题 我对所有元素使用了类 因为克隆会重复 ID 不会出现问题 因为它无法唯一地定位每个元素 使每个元素 行在这里唯一的方法是什么 功能如何工作 当第一次选择框时 所选 ID 的
  • Rails I18n 翻译范围

    编写完全翻译的应用程序可能会变得乏味 有没有办法为当前上下文设置默认翻译范围 示例 我正在部分内容中写入 deadlines html erb in the 显示 html erb我的行动ProjectsController 现在 因为我想
  • 代理递归函数

    想象一个简单的递归函数 我们试图包装它以检测输入和输出 A simple recursive function const count n gt n 1 count n 1 Wrap a function in a proxy to ins
  • 用于匹配重复子字符串的单个js正则表达式?

    假设我有一个字符串 例如 where is mummy where is daddy 我想用空字符串替换任何一组重复子字符串 所以在这种情况下where and is元素将被删除 结果字符串将是 mummy daddy 我想知道是否有任何单
  • Google App Script postMessage 与收件人窗口的来源不匹配

    我有一个 Google App 脚本部署为Web应用程序 https developers google com apps script guides web 它工作正常 直到今天晚上我发现它无法在 Firefox 或 Chrome 中加载
  • 从画布保存/转换后文件质量下降的问题

    这是我正在使用的代码 代码位于这篇文章的底部 但这里是链接GitHubGist Noitidart ff addon snippet browseForBadgeThenCreateSaveAnApply js https gist git
  • 为什么 html 中的 AngularJS 错误没有显示在控制台中?

    Here s a fiddle http jsfiddle net 6y7odxmj 3 用于说明 当 ng click 指令 例如 调用未在控制器的 scope 或其父级 上定义的函数时 它会默默地失败 当我尝试调试网页时 这种行为令人抓
  • Javascript 函数,我如何开始理解它们?

    我完全理解 为了学习 javascript 我需要知道函数是如何工作的 我了解传递参数的基础知识 然后使用值调用函数以将某些内容添加到一起 等等 我读过无数关于函数的文章 例如以及书籍等 但我只是不明白它们是如何使用的以及何时应该使用它们等
  • 新部署后,React 应用程序必须清除浏览器缓存

    我们正在使用 Jenkins 管道在 apache 服务器上部署 React 应用程序 当我们部署新代码时 大多数新功能都可以正常工作 但并非所有更改都反映浏览器中的最新内容 用户必须打开隐身窗口或清除缓存才能看到新功能 我见过一些相关的解
  • 云函数 onUpdate:无法读取未定义的属性“forEach”

    现在我正在尝试更新我的项目中的图片 我可以更新云火商店中的图片网址 但我也想使用 firebase 云功能从云存储中删除上一张图片 我想要实现的是 当我上传新图片时 从云存储中删除以前的图片 This is my data structur
  • 如何使用 Ajax 在 Flask 中发布按钮值而不刷新页面?

    我有一个问题 当我单击 Flask 应用程序中的按钮时 我想避免重新加载 我知道有 Ajax 解决方案 但我想知道如何将我的按钮链接到 ajax 函数以发布按钮值并运行链接到其值的 python 函数 这是我的 html 按钮 div di
  • 将base64图像转换为Node Js中的文件

    我是 Node Js 新手 我需要包含用户的个人资料图片 我从 IOS 应用程序收到 Base64 图像的请求 我需要将其存储在 images 文件夹中并将图像路径保存在 mongodb 数据库中 我使用了以下代码 var bitmap n
  • 带有延迟的 jQuery 切换类只能运行一次

    当涉及到 jQuery 匿名函数和延迟时 我显然错过了一些基本的东西 下面的代码每次页面加载只能运行一次 它将添加该类 然后在 1 秒后将其删除 如果我再次单击 它将添加该类 但在页面持续时间内永远不会删除该类 除非我重新加载页面 var
  • 如何在 Servlet 中打开弹出窗口,然后重定向页面

    我想在调用 servlet 时打开一个弹出窗口 然后想将 servlet 重定向到某个 jsp page 这就是我所做的 protected void doGet HttpServletRequest request HttpServlet
  • Chrome + 另一个进程:进程间通信比 HTTP/XHR 请求更快?

    我有一个进程 1 对视频流进行实时图像处理 我需要在 Chrome 中的 HTML 页面中渲染该视频 同一台计算机上的进程 2 在canvas or img or videoHTML5 元素 由于我有 1000x1000 像素 x 3 字节
  • 如何在输入时格式化 contenteditable div?

    我正在尝试编写一个函数 允许 contenteditable div 在用户输入 div 时执行一些自动格式化 到目前为止我只能让它在 IE 中运行 有人可以帮助我吗 function formatOnKeyUp if window get
  • 表单帖子上的 asp.net mvc 编码

    我在我的 asp net mvc 表单 带有文本区域的 nicedit 中使用富文本编辑器 当我在帖子上提交表单时 因为它不是 html 编码的 我收到以下消息 从客户端检测到潜在危险的 Request Form 值 如何对 post 上的

随机推荐

  • 如何:javascript 淡入淡出文本

    首先 我浏览了 stackoverflow 上的其他帖子 但没有一个包含我正在寻找的信息 第二 我是编程新手 我想在我的网站上有一个淡入和淡出文本的 div 我在一些网站上看到过这个 我很确定它是使用 jQuery 库的 javaScrip
  • 找到列表中的所有山丘和山谷

    我正在编写一个函数来查找给定列表中的所有山丘和山谷 例如 1 0 0 0 1 返回 3 0 1 0 1 0 返回 5 0 2 2 1 1 0 0 返回 3 如果一个数字 或具有相同值的连续数字 比它的两个邻居都大或小 它被认为是一座山或一座
  • “未处理的 JS 异常:类型错误”

    我刚刚重置了 iPhone 模拟器的设置 通过点击 重置内容和设置 现在我遇到了以前从未遇到过的问题 这里是 我坚持认为该项目在重置之前完美运行 但我需要清除应用程序的本地存储 当人们更改位置时 我确实看到了一些帖子index ios js
  • gvisScatterChart 动态定义系列

    我正在动态创建几个gvisScatterCharts 我想定义每条线的颜色 我可以使用系列和颜色属性来完成 没有什么比订单或固定数字更能让我预先定义颜色的了 所以我想创建一个与我的颜色平行的属性数组 并将其放在series myColors
  • 如何启用格式化的 Xdebug 错误和跟踪

    我不确定我何时或更改了什么 但突然 xdebug 不再呈现其格式化的堆栈跟踪 相反 它在没有任何 HTML 的情况下呈现 stacktrtace 这是一个例子 http berkes openphoto me photo l view 而我
  • 模型继承和属性默认值

    我有一个带有类别属性和几个子类的主类 我想为每个子类设置默认类别 例如 class BaseAd models Model CATEGORY CHOICES 1 Zeta 2 Sigma 3 Omega category models In
  • 无法在准备好的 INSERT 语句中使用 python mysql.connector 中的 None (NULL) 值

    当尝试使用准备好的光标并插入时NULL重视mysql 连接器报错 mysql Error 1210 HY000 Incorrect arguments to mysqld stmt execute 这是准确显示这一点的代码 from fut
  • 如何在mysql的列之间进行搜索

    我有两列存储值 数字 如何选择给定数字在两列中的值之间的位置 例子 id col1 col2 1 20 50 2 200 400 3 500 650 如果我的值为 25 我如何选择值 25 位于它们之间的记录 在本例中为第 1 行 sele
  • C 或 C++ 中 >>= 的含义是什么?

    的含义是什么 gt gt C 或 C 中的符号 它有什么特别的名字吗 我有这个for循环一些 CUDA 代码 如下所示 for int offset blockDim x offset gt 0 offset gt gt 1 Some co
  • Numpy 将布尔数组的字符串表示形式转换为布尔数组

    是否有一种原生的 numpy 方法来转换布尔值的字符串表示数组 例如 True False True False 对于我可以用于屏蔽 索引的实际布尔数组 我可以做一个 for 循环来遍历并重建数组 但对于大型数组来说 这很慢 您应该能够进行
  • 验证插件未验证所有字段

    我正在使用 jQuery 验证插件进行表单验证 它只是检查第一个字段 如果第一个字段验证为真 则正在提交表单 它不验证其余字段 我正在使用引导程序3 0
  • 输入语句块时会创建新的堆栈帧吗? [复制]

    这个问题在这里已经有答案了 可能的重复 在 C 语言中 大括号充当堆栈框架吗 https stackoverflow com questions 2759371 in c do braces act as a stack frame int
  • Selenium:如何点击javascript按钮

    我必须编写一些用于自动测试的脚本 以检查使用 flex amf 技术构建的 Web 应用程序的加载时间 测试将包括打开 IE 浏览器 浏览多个选项卡 并测量从单击最后一个选项卡加载页面内容到关闭浏览器的时间 我使用 Selenium Web
  • RavenDB 索引错误

    我刚刚开始使用 Raven 我创建的索引始终无法索引任何内容 我在 Raven 服务器上发现了很多如下所示的错误 Index HomeBlurb IncludeTotalCosts Error Cannot implicitly conve
  • VB.NET 尝试将通用 Invoke 方法修改为通用 BeginInvoke 方法,出现意外问题

    VB NET 2010 NET 4 Hello 我一直在使用一种非常灵活的通用调用方法来从后台线程更新 UI 我忘记了从哪里复制它 从 C 将其转换为 VB NET 但它是 Public Sub InvokeControl Of T As
  • Reflection.Emit 和泛型类型

    我在用Reflection Emit我想创建一个与 C 中定义的以下类型等效的类型 class A public Tuple
  • 如何在 Mercurial 中添加远程存储库?

    我通过以下方式使用 Git 存储库 我在不同的生产机器上有主存储库和几个遥控器 我将生产代码推送到远程并重新启动服务以使更改生效 我即将从 Git 切换到 Mercurial 我想提前知道如何实现类似的目标 您将条目添加到 paths 本地
  • 优雅地从 has_many 中选择属性:通过 Rails 中的连接模型

    我想知道从 has many 中的连接模型选择属性的最简单 最优雅的方法是什么 通过关联 假设我们有具有以下 Item 类的 Items Catalogs 和 CatalogItems class Item lt ActiveRecord
  • 抽象工厂模式是否有“更多”的现实世界示例? [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我目前正在研究OPP的设计模式 只是为了给您一些背景知识 这不是我第一次遇到这些模式 我已经编程了一段时
  • 在 Rails 中动态添加字段,无需嵌套属性

    我正处于创建应用程序的早期阶段 只是放置一些基本代码 这是当前的代码 应用程序 视图 卡片 front html erb routes controller cards do get front