帮助渲染来自fields_for的部分内容(Help to render a partial from fields_for)

我正在使用nested_attributes并试图通过Ryan Bates关于嵌套模型(#196)的截屏实现添加/删除字段,

这样做,它不会工作,但是当删除“link_to_add_fields”行时,它工作正常。

问题是我不知道我是否正确地完成了所有的关联。

<%= form_for(@item) do |f| %>
<% if @item.errors.any? %>
<div id="error_explanation">
  <h2><%= pluralize(@item.errors.count, "error") %> prohibited this item from being saved:</h2>

  <ul>
  <% @item.errors.full_messages.each do |msg| %>
    <li><%= msg %></li>
  <% end %>
  </ul>
  </div>
  <% end %>

  <div class="field">
    <%= f.label :title %><br />
    <%= f.text_field :title %>
  </div>
  <div class="field">
    <%= f.label :item_type_id %><br />
    <%= f.select :item_type_id, @item_types.collect { |p| [ p.title, p.id ]} %>
    <br />
    <%= f.fields_for :item_parts do |parts_form| %>
      <%= render "item_part_fields", :p => parts_form %>
    <% end %>
  </div>
  <%= link_to_add_fields "Add Part", f, :part %>
  <div class="actions">
    <%= button_for "Save Item", :class => 'positive pill button', :button_type => 'submit' %>
  </div>
<% end %>

其实我的模特是:

“ItemPart”模型:

class ItemPart < ActiveRecord::Base
  belongs_to :item
  belongs_to :part 
end

“物品”型号:

class Item < ActiveRecord::Base
  belongs_to :item_type
  has_many :item_parts
  has_many :parts, :through => :item_parts
  accepts_nested_attributes_for :item_parts, :allow_destroy => true
  after_save :save_id
  validates :title, :presence => true

  def save_id
    item_part_attributes = [ { :item_id => self.id } ]
  end

end

“部分”模型:

class Part < ActiveRecord::Base
  has_one :part_type
  has_many :item_parts
  has_many :items, :through => :item_parts

end

我正在这样做的错误:

undefined method `klass' for nil:NilClass
Extracted source (around line #26):



23:       <%= render "item_part_fields", :p => parts_form %>
24:     <% end %>
25:   </div>
26:   <%= link_to_add_fields "Add Part", f, :item %>
27:   <div class="actions">

应用跟踪

app/helpers/application_helper.rb:44:in `link_to_add_fields'
app/views/items/_form.html.erb:26:in `block in _app_views_items__form_html_erb__1418129287024756954_2169222480__3228169100620818569'
app/views/items/_form.html.erb:1:in `_app_views_items__form_html_erb__1418129287024756954_2169222480__3228169100620818569'
app/views/items/edit.html.erb:3:in `_app_views_items_edit_html_erb___1857878264245794505_2169270380_890290209246324491'

Application_helper.rb

def link_to_add_fields(name, f, association)
  new_object = f.object.class.reflect_on_association(association).klass.new # error line :44
  fields = f.fields_for(association, new_object, :child_index => "new_#{association}") do |builder|
    render(association.to_s.singularize + "_fields", :f => builder)
  end
  link_to_function(name, "add_fields(this, '#{association}', '#{escape_javascript(fields)}')" )
end

I'm using nested_attributes and trying to implement the add/remove fields on-the-fly throu ajax following Ryan Bates screencast about Nested Model (#196)

Doing this, it won't work, but when removing the "link_to_add_fields" line, it works fine.

The problem is that I'm don't know if I doing this all associations right.

<%= form_for(@item) do |f| %>
<% if @item.errors.any? %>
<div id="error_explanation">
  <h2><%= pluralize(@item.errors.count, "error") %> prohibited this item from being saved:</h2>

  <ul>
  <% @item.errors.full_messages.each do |msg| %>
    <li><%= msg %></li>
  <% end %>
  </ul>
  </div>
  <% end %>

  <div class="field">
    <%= f.label :title %><br />
    <%= f.text_field :title %>
  </div>
  <div class="field">
    <%= f.label :item_type_id %><br />
    <%= f.select :item_type_id, @item_types.collect { |p| [ p.title, p.id ]} %>
    <br />
    <%= f.fields_for :item_parts do |parts_form| %>
      <%= render "item_part_fields", :p => parts_form %>
    <% end %>
  </div>
  <%= link_to_add_fields "Add Part", f, :part %>
  <div class="actions">
    <%= button_for "Save Item", :class => 'positive pill button', :button_type => 'submit' %>
  </div>
<% end %>

Actually my models are:

"ItemPart" model:

class ItemPart < ActiveRecord::Base
  belongs_to :item
  belongs_to :part 
end

"Item" model:

class Item < ActiveRecord::Base
  belongs_to :item_type
  has_many :item_parts
  has_many :parts, :through => :item_parts
  accepts_nested_attributes_for :item_parts, :allow_destroy => true
  after_save :save_id
  validates :title, :presence => true

  def save_id
    item_part_attributes = [ { :item_id => self.id } ]
  end

end

"Part" model:

class Part < ActiveRecord::Base
  has_one :part_type
  has_many :item_parts
  has_many :items, :through => :item_parts

end

The error I'm getting doing this way:

undefined method `klass' for nil:NilClass
Extracted source (around line #26):



23:       <%= render "item_part_fields", :p => parts_form %>
24:     <% end %>
25:   </div>
26:   <%= link_to_add_fields "Add Part", f, :item %>
27:   <div class="actions">

Application trace

app/helpers/application_helper.rb:44:in `link_to_add_fields'
app/views/items/_form.html.erb:26:in `block in _app_views_items__form_html_erb__1418129287024756954_2169222480__3228169100620818569'
app/views/items/_form.html.erb:1:in `_app_views_items__form_html_erb__1418129287024756954_2169222480__3228169100620818569'
app/views/items/edit.html.erb:3:in `_app_views_items_edit_html_erb___1857878264245794505_2169270380_890290209246324491'

Application_helper.rb

def link_to_add_fields(name, f, association)
  new_object = f.object.class.reflect_on_association(association).klass.new # error line :44
  fields = f.fields_for(association, new_object, :child_index => "new_#{association}") do |builder|
    render(association.to_s.singularize + "_fields", :f => builder)
  end
  link_to_function(name, "add_fields(this, '#{association}', '#{escape_javascript(fields)}')" )
end

原文:https://stackoverflow.com/questions/6939634
2024-04-24 21:04

满意答案

我想你需要一个不同的背景颜色,这就是为什么border-radius: 25px 0 0 25px; 不适合你。 一种解决方案是选择背景并更改其渐变。 我已使用http://www.cssmatic.com/gradient-generator生成颜色渐变。

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: 0;
  
  color: #ffffff;
  border-radius: 25px;
  text-align: center;
  
}
.ui-datepicker td {
    border: 0;
    padding: 0px;
}

//Create the gradient for the td here-- only for the selected date
//At the end date, reverse the gradient and it will look almost like the picture you shared. 
 .ui-datepicker-today {
 background: rgba(105,84,68,1);
background: -moz-linear-gradient(left, rgba(105,84,68,1) 47%, rgba(173,217,120,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(47%, rgba(105,84,68,1)), color-stop(100%, rgba(173,217,120,1)));
background: -webkit-linear-gradient(left, rgba(105,84,68,1) 47%, rgba(173,217,120,1) 100%);
background: -o-linear-gradient(left, rgba(105,84,68,1) 47%, rgba(173,217,120,1) 100%);
background: -ms-linear-gradient(left, rgba(105,84,68,1) 47%, rgba(173,217,120,1) 100%);
background: linear-gradient(to right, rgba(105,84,68,1) 47%, rgba(173,217,120,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#695444', endColorstr='#add978', GradientType=1 );
 }


Finally done this only with css, see FIDDLE here One need to play a bit with position and after.

$("#datepicker").datepicker();
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: 0;
  border-radius: 25px;
  text-align: center;
}
td {
  position: relative;
  z-index: 1111;
}
a.ui-state-default.ui-state-highlight:after {
  content: "";
  background: green;
  height: 23px;
  width: 25px;
  position: absolute;
  z-index: -1;
  right: 0;
  top: 1px;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>

  <div class="demo">

    <p>Date:
      <input id="datepicker" type="text">
    </p>

  </div>
  <!-- End demo -->

  <div style="display: none;" class="demo-description">
    <p>The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If
      a date is chosen, feedback is shown as the input's value.</p>
  </div>
  <!-- End demo-description -->
</body>

</html>

相关问答

更多

border-radius + background-color ==裁剪边框(border-radius + background-color == cropped border)

尝试overflow:hidden在外部div : <div style="border-radius:10px; border: 1px black solid; overflow: hidden"> <div style="background-color:#EEEEEE;"> Blah </div> </div> Try overflow:hidden in the outer div: <div style="border-radius:10px; border: ...

CSS在嵌套div上出现border-radius错误(CSS wrong appearance of border-radius on a nested div)

问题的第1部分:(儿童成为原始演示中的一轮) 问题是因为box-sizing: border-box 。 设置此选项后,框的定义高度,宽度(250 x 250px)将被视为包含border宽度和padding 。 因此,元素的实际内容区域仅为200px x 200px(水平和垂直边框不包括50px)。 因此,子div只有200px x 200px的大小( 这可以在Dev工具中验证 )。 当从父节点继承100px的border-radius时,它变为圆形,因为它是其尺寸的一半。 因此,如果必须维护形...

背景颜色重叠border-radius [关闭](Background-color overlapping border-radius [closed])

在外部div(具有边界半径的div)上添加overflow:hidden。 如果出于某种原因想要避免这种情况,您还可以向子元素添加额外的边界半径。 On the outer div(the one with the border radius) add overflow:hidden. If for whatever reason you want to avoid that, you can also add an additional border radius to the child el...

背景颜色隐藏边界半径ie8(background color hide border-radius ie8)

你需要使用-pie-background ,而不是旧的IE filter渐变。 来自PIE网站 background: linear-gradient(#EEFF99, #66EE33); -pie-background: linear-gradient(#EEFF99, #66EE33); behavior: url(/pie/PIE.htc); You need to use -pie-background, not the old IE filter gradient. From the ...

css中的border-radius和background-color冲突(border-radius and background-color conflict in css)

我想你需要一个不同的背景颜色,这就是为什么border-radius: 25px 0 0 25px; 不适合你。 一种解决方案是选择背景并更改其渐变。 我已使用http://www.cssmatic.com/gradient-generator生成颜色渐变。 .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border: 0; ...

Internet Explorer css问题:border-radius,background-color,gradient(Internet Explorer css issues: border-radius, background-color, gradient)

好的,缺少的背景是父级没有扩展到其内容。 简单地浮动它会让它回来,但它可能不是最好的解决方案(我没有广泛检查你的布局)。 导航中的圆角隐藏在后面背景nav.main-navigation(样式来自nav)后面。 现在,Webkit浏览器为内部元素提供了圆角(nav在#main内部),但IE却没有。 更简洁的方法是将您的导航到#main之外: <nav> <-- rounded corner, black bg <main> <-- white bg 我找不到渐变。 我希望这有点帮助,I...

CSS border-radius:20px(CSS border-radius:20px)

你可以添加.imageContent类: border-radius: 50px; 但它也是临时解决方案...... you can add .imageContent class: border-radius: 50px; but it's temporary solution too...

CSS border-radius(CSS border-radius)

尝试溢出:隐藏在div上? 或者给它一个z指数1000 try overflow:hidden on the div? or give it a z-index of 1000

如何在nativescript中给stacklayout赋予border和border-radius(how to give border and border-radius to stacklayout in nativescript)

在nativescript支持的css属性中是border-width,border-color和border-radius。 单独的标记边框是不可能的,也不是任何可靠的选 更多信息: https://docs.nativescript.org/ui/styling In nativescript supported css properties are border-width, border-color and border-radius. Tag border alone is not po...

未应用css border-radius(css border-radius is not applied)

为.navigation background-color 。 像这样写: .navigation { background: #484745; } 检查一下: jsFiddle Give background-color to .navigation. Write like this: .navigation { background: #484745; } Check this: jsFiddle

相关文章

更多

Storm 中 Fields作用

之前一直没搞清楚Fields的作用,今天再看一个例子的时候突然脑洞大开,想通了!看得例子如下。 Tra ...

Becoming a data scientist

Data Week: Becoming a data scientist Data Pointed, ...

Solr: a custom Search RequestHandler

As you know, I've been playing with Solr lately, tr ...

Create a Bootable MicroSD Card

http://gumstix.org/create-a-bootable-microsd-card.h ...

Storm【设计细节】 -Fields对象

本章主题: 记录一个小小的Tips 1 Storm在Emit publicclassValuesext ...

Solr 4.0: Partial documents update

http://solr.pl/en/2012/07/09/solr-4-0-partial-docum ...

用A标签实现页面内容定位 点击链接跳到具体位置

  经常在维基百科等网站看到目录列表,点击链接会跳到具体的位置,小美眉一直在问是怎么做到的,其实挺简单 ...

Scaling Pinterest - From 0 To 10s Of Billions Of Page Views A Month In Two Years

这篇文件写的非常好,推荐大家重温一下: http://highscalability.com/blog ...

A5营销访谈:卢松松和你聊新媒体运营那些事

A5芳芳:大家好,这里是A5营销(http://www.admin5.cn)专家访谈,今天请到的嘉宾— ...

《wordpress插件制作视频教程》(How to create a wordpress plugin)全5集更新完毕[HDTV]

中文名: wordpress插件制作视频教程 英文名: How to create a word ...

最新问答

更多

python的访问器方法有哪些

使用方法: class A(object): def foo(self,x): #类实例方法 print "executing foo(%s,%s)"%(self,x) @classmethod def class_foo(cls,x): #类方法 print "executing class_foo(%s,%s)"%(cls,x) @staticmethod def static_foo(x): #静态方法 print "executing static_foo(%s)"%x调用方法: a =

使用Zend Framework 2中的JOIN sql检索数据(Retrieve data using JOIN sql in Zend Framework 2)

我认为你必须将两个TableGetway传递给UserTable构造。 你必须改变Module.php看看: public function getServiceConfig() { return array( 'factories' => array( 'User\Model\UserTable' => function($sm) { $userTableGateway = $sm->get('UserTable

透明度错误IE11(Transparency bug IE11)

这是一个渲染错误,由使用透明度触发,使用bootstrap用于在聚焦控件周围放置蓝色光环的box-shadow属性。 可以通过添加以下类覆盖来解决它。 .form-control:hover { -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,255,1); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,255,1); box-shadow: 0px 0px 4px 0px rgba(0,0,255,1)

linux的基本操作命令。。。

ls 显示目录 mkdir 建立目录 cd 进入目录

响应navi重叠h1和nav上的h1链接不起作用(Responsive navi overlaps h1 and navi links on h1 isn't working)

将z-index设置为.main-nav这将解决您的重叠问题 .main-nav { position:relative; z-index:9; } set z-index to .main-nav This will fix your overlaping issue .main-nav { position:relative; z-index:9; }

在C中读取文件:“r”和“a +”标志的不同行为(Reading a File in C: different behavior for “r” and “a+” flags)

这是因为模式规范"a"打开一个文件以便追加,文件指针在末尾。 如果您尝试从此处读取,则由于文件指针位于EOF,因此没有数据。 您应该打开"r+"进行阅读和写作。 如果在写入之前读取整个文件,则在写入更多数据时,文件指针将正确定位以追加。 如果这还不够,请探索ftell()和fseek()函数。 That is because the mode spec "a" opens a file for appending, with the file pointer at the end. If you

NFC提供什么样的带宽?(What Kind of Bandwidth does NFC Provide?)

支持空中接口的数据速率是一回事。 在消除协议开销,等待eeprom写入以及所有需要时间的其他内容之后,您看到的数据速率是完全不同的故事。 长话短说,从标签读取或进行对等传输时的实际数据速率峰值约为2.5千字节/秒。 取决于具体的标签或对等技术,它可能比这慢很多。 The supported data-rates of the air-interface are one thing. The data-rate that you see after removing protocol overhe

元素上的盒子阴影行为(box-shadow behaviour on elements)

它看起来像只在Windows上的Chrome的错误。 我在Google Canary (Chrome 63)中也进行了测试,问题依然存在,所以有可能它不会很快修复。 这个问题是由overflow: auto引起的overflow: auto ,在你的情况下,它可以很容易地通过删除或设置为可见(默认)来解决。 但是 ,将鼠标悬停在右侧(顶部和底部)时,会出现滚动条。 一个解决方案可以设置overflow: hidden的身体,所以预期的结果是所需的。 我想指出,这不是一个很好的解决方案,但我建议暂

Laravel检查是否存在记录(Laravel Checking If a Record Exists)

这取决于您是否要以后与用户合作,或仅检查是否存在。 如果要使用用户对象(如果存在): $user = User::where('email', '=', Input::get('email'))->first(); if ($user === null) { // user doesn't exist } 如果你只想检查 if (User::where('email', '=', Input::get('email'))->count() > 0) { // user found

设置base64图像的大小javascript - angularjs(set size of a base64 image javascript - angularjs)

$scope.getData= function () { var reader = new FileReader(); reader.onload = $('input[type=file]')[0].files; var img = new Image(); img.src =(reader.onload[0].result); img.onload = function() { if(this.width > 640