Model:

  1. class Blog < ActiveRecord::Base
  2. has_many :strip_rules
  3. accepts_nested_attributes_for :strip_rules, allow_destroy: true
  4. end

  

  1. class StripRule < ActiveRecord::Base
  2. belongs_to :blog
  3. attr_accessible :rule, :blog_id
  4. end

  

要实现在新建和修改blog时可以添加/删除任意多个strip_rule

我们用rails中得 accepts_nested_attributes_for实现这个功能。

新建和修改页面调用模板页面_form.html.erb

  1. #form页面主要实现代码
  2. <%= f.fields_for :strip_rules do |strip_rule| %>
  3. <%= render "strip_rule", :f => strip_rule %>
  4. <% end %>
  5. <p><%= raw link_to_add_fields("增加一条新规则", f, :strip_rules) %></p>
  6. <div class="form-group">
  7. <%= f.submit '确定', class: 'btn btn-default' %>
  8. </div>

代码中调用子模板页 _strip_rule.html.erb

  1. <p class="fields">
  2. <%= f.label :rule, "内容" %>
  3. <%= f.text_field :rule %>
  4. <%= link_to_remove_fields "remove", f %><br />
  5. </p>

form页面用到得helper方法

  1. module BlogAdminHelper
  2. def link_to_remove_fields(name, f)
  3. f.hidden_field(:_destroy) + link_to_function(name, "remove_fields(this)")
  4. end
  5.  
  6. def link_to_add_fields(name, f, association)
  7. new_object = f.object.class.reflect_on_association(association).klass.new
  8. fields = f.fields_for(association, new_object, :child_index => "new_#{association}") do |builder|
  9. render(association.to_s.singularize, :f => builder)
  10. end
  11. link_to_function(name, raw("add_fields(this, \"#{association}\", \"#{escape_javascript(fields)}\")"))
  12. end
  13. end

以及form页中需要用到得js

  1. <script type="text/javascript">
  2. function remove_fields(link) {
  3. $(link).prev("input[type=hidden]").val("1");
  4. $(link).closest(".fields").hide();
  5. }
  6.  
  7. function add_fields(link, association, rule) {
  8. var new_id = new Date().getTime();
  9. var regexp = new RegExp("new_" + association, "g");
  10. $(link).parent().before(rule.replace(regexp, new_id));
  11. }
  12. </script>

其中遇到最麻烦的问题是增加一条新内容时html解析出很多&quot; ,导致调用js报错。

解决办法:使用rails提供的辅助方法raw,会调用html_safe方法,去掉&quot;

  1. raw("add_fields(this, \"#{association}\", \"#{escape_javascript(fields)}\")")

最终效果

rails中accepts_nested_attributes_for应用的更多相关文章

  1. rails 中 create, new, build, save 的用法以及误区汇总

    自己很初级,初级的不能再初级,所以初次接触rails的时候,对于里面的create,new,build等方法不是很了解,用的很混乱,导致经常出现不必要的bug,很苦恼,决定,总结一下,结合网上已有资源 ...

  2. rails 中 create, new, build, save 的用法以及误区汇总 (转)

    自己很初级,初级的不能再初级,所以初次接触rails的时候,对于里面的create,new,build等方法不是很了解,用的很混乱,导致经常出现不必要的bug,很苦恼,决定,总结一下,结合网上已有资源 ...

  3. Rails中关联数据表的添加操作(嵌套表单)

    很早就听说有Web敏捷开发这回事,最近终于闲了下来,可以利用业余的时间学些新东西,入眼的第一个东东自然是Ruby on Rails.Rails中的核心要素也就是MVC.ORM这些了,因此关于Rails ...

  4. Rails中的MIME类型

    layout title date comments categories post rails的中的MIME类型 2014-09-08 21:40 true ruby Rails开发中经常使用不同的 ...

  5. rails中weill_paginate的paginate方法中不能使用额外参数的解决办法

    我们知道高版本中的rails中的分页功能已经放在will_paginate这个gem中,我们在控制器方法中往往需要调用其paginate方法来实现分页数据集控制,举个例子:正常的情况我们想要每页显示1 ...

  6. rails中params[:id]与params["id"]分析

    写这个帖子的缘由是因为在页面参数传到rails的controller时用params[:]和params[""]都可以取到值: [1] pry(#<BooksControll ...

  7. Rails中的增删改查

      1.        rails中类与对象与SQL中表与行的关系 rails中提供了对象关系映射(ORM),将模型类映射至表,模型类的关联表名是类名小写后的复数形式,如类名Order,对应的表名为o ...

  8. rails中path、url路径解析,routes信息,form_for剖析,link_to示例,路由实例说明

    原创,转载请注明http://www.cnblogs.com/juandx/p/3963023.html  rails中path.url路径解析,routes信息,form_for剖析,link_to ...

  9. rails中使用CarrierWave实现文件上传的功能

    之前在用django写blog的时候头像上传和头像预览都是使用原生的js实现的,之前也有写了一篇blog.好了开始进入正题 rails中实现头像上传十分的方便,只要通过CarrierWave这个gem ...

随机推荐

  1. windows 10 下配置安装node.js

      环境配置 node.js windows10 25.5k 次阅读  ·  读完需要 6 分钟 5 在去年就自己配置安装过node.js,但是使用npm安装模块时安装成功后调用require('mo ...

  2. 8.ajax与django后台json数据的交互

    1新建django项目名为json_ajax,应用名为app,在templates模板中新建ajax.html文件 ajax.html <!DOCTYPE html> <html l ...

  3. Android-Kotlin-代理和委托

    代理和委托,在生活中的案例有很多: 例如:小明工作很忙,需要办理银行卡,此时他委托给>>小李去给自己办理银行卡,小李来到办理中心 把自己的身份证/小李的身份证,给办理人员,说是小明委托我, ...

  4. nginx 访问频率控制

    Nginx访问频率控制 HTTP服务器的吞吐率(单位时间吞吐量)通常有一个上限,尤其是普通配置的机器,在带宽够的情况下,用压测工具经常能把服务器压出翔,为了线上环境稳定性,防止恶意攻击影响到其他用户, ...

  5. C#把汉字转换成16进制(HEX)并向串口发送数据

    报警器实例:(有发送,无返回获取) using System; using System.Collections.Generic; using System.Linq; using System.Te ...

  6. .net core 与ELK(1)安装Elasticsearch

    1.安装java jdk [elsearch@localhost bin]$ java -version openjdk version "1.8.0_181" OpenJDK R ...

  7. 存储过程 Mvc 的调用

    /// <summary>        /// 根据条件,使用存储过程分页查询电影        /// </summary>        /// <param na ...

  8. mongdb window 服务安装批处理

    安装mongodb 3.x 安装完毕后 将以下代码保存为批处理 然后用管理员权限执行就可以成功安装服务了 cd C:\Program Files\MongoDB\Server\3.0\binmongo ...

  9. [转载]java开发中的23种设计模式

    原文链接:http://blog.csdn.net/zhangerqing 设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反 ...

  10. Spring Boot log4j多环境日志级别的控制

    之前介绍了在<Spring boot中使用log4j>,仅通过log4j.properties对日志级别进行控制,对于需要多环境部署的环境不是很方便,可能我们在开发环境大部分模块需要采用D ...