问题 <ol><li> 使用rails partial和cocoon gem实现

Question

I'm having some trouble with implementing an ordered list in my rails application. 我在rails应用程序中实现有序列表时遇到了一些麻烦。 I've been using the cocoon gem for a some nested forms and everything's working functionality wise, however, i cant seem to render an ordered list to make the nested form more readable. 我一直在使用cocoon gem来创建一些嵌套的表单，并且所有功能都是明智的，但是，我似乎无法呈现一个有序列表来使嵌套表单更具可读性。

to start my code looks like this _form.html.erb 启动我的代码看起来像这个_form.html.erb

....
      <div class="clearfix">
        <div class="col-lg-3 col-md-6">
          <ol>
          <%= f.label :Movement %>
                <%= f.fields_for :movements do |movement| %>
                  <li><%= render 'movement_fields', f: movement %></li>
                <% end %>
            <div class="links">
              <%= link_to_add_association 'Add movement', f, :movements, class: "pull-right d-inline-block btn btn-primary add-button" %>
          </ol>
              </br>
              </br>
            </div>
        </div>
.....

_movement_fields.html.erb _movement_fields.html.erb

<div class="nested-fields">
    <li><%= f.text_field :name %></li>
    <%= link_to_remove_association "Remove", f, class: "pull-left d-inline-block form-button btn btn-warning" %>
</div>

exercise.js exercise.js

$(document).ready(function() {
$('#exercise_workout_date').datepicker({ dateFormat: 'yy-mm-dd' });

new Morris.Line({
// ID of the element in which to draw the chart.!
element: 'chart',
// Chart data records -- each entry in this array corresponds to a point on!
// the chart.!
data: $('#chart').data('workouts'),
// The name of the data record attribute that contains x-values. xkey: 'workout_date',!
// A list of names of data record attributes that contain y-values. ykeys: ['duration_in_min'],!
// Labels for the ykeys -- will be displayed when you hover over the // chart.!
xkey: 'workout_date',
ykeys: ['duration_in_min'],
labels: ['Duration (min)'],
xLabels: "day",
xLabelAngle: 60,
xLabelFormat: function (x) {
date_string = x.getFullYear() + "/" + parseInt(x.getMonth() + 1) + "/" + x.getDate();
return date_string; 
},
yLabelFormat: function(y) { return y + ' min'; } 
});
});
$('#list').html('<li>foo</li>');

application.js 的application.js

//= require jquery
//= require jquery-ui/datepicker
//= require jquery_ujs
//= require jquery.raty.min
//= require chosen-jquery
//= require bootstrap-sprockets
//= require raphael.min
//= require morris
//= require social-share-button
//= require html.sortable
//= require cocoon
// require turbolinks
//= require_tree .

application.html application.html

<!DOCTYPE html>
    <html>
    <head lang=”en”>
      <title>FitnessLabs (A & K LABS)</title>
      <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
      <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
      <%= csrf_meta_tags %>
      <%= favicon_link_tag 'logo.ico' %>
      <link href="https://fonts.googleapis.com/css?family=Doppio+One|Pacifico" rel="stylesheet">
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
      <meta name=viewport content="width=device-width, initial-scale=1">
    </head>
    <body>

      <%= render "layouts/navigation2"%>

      <div class="container-fluid">
        <%= render 'layouts/messages'%>
        <%= yield %>
      </div>

      <%= render "layouts/footer" %>

    </body>
      <script src="//load.sumome.com/" data-sumo-site-id="c5bf8251f90d125ef3264df7e976b4ab5a4a5a380ab1deaec05444284b2169d0" async="async"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
    </html>

Currently this code renders a 1. for the first list item, however, when i click 'add movement' it doesn't render the 2. 3. 4. etc. for each successive part of the form. 目前，此代码为第一个列表项呈现1.但是，当我单击“添加运动”时，它不会为表单的每个连续部分呈现2. 3. 4.等。 I've tried moving the < ol> and < li>'s around but this is the closest i've come. 我试过移动<ol>和<li>，但这是我最接近的。

I want the user to be shown 1, 2, 3 etc. for each new nested form partial thats rendered, so it makes it clearer which coincides with which. 我希望为每个新呈现的嵌套表单部分显示1,2,3等用户，这样可以更清楚地与哪个一致。 How would i go about doing this? 我该怎么做呢？ Am i on the right path? 我在正确的道路上吗？

Thanks, 谢谢，

Answer 1

Original: 原版的：

So the problem is that html before 5 doesn't render when your jquery fires to add the field. 所以问题是当你的jquery触发添加字段时，5之前的html不呈现。

The solution is open ended here, you use any number of technologies to solve the issue as it's not related to cocoon or rails really. 解决方案在这里是开放式的，您可以使用任意数量的技术来解决问题，因为它与cocoon或rails无关。

My suggestion is since you have cocoon already, just put 1 of the two options below in the custom cocoon callback files ( app/assets/javascript/ ), you can use a after-insert callback to ... 我的建议是，既然你已经有了cocoon，只需将下面两个选项中的一个放入自定义cocoon回调文件（ app/assets/javascript/ ）中，就可以使用后插入回调来...

Option A 选项A.

You use jquery to force ONLY the <OL> list to render again, allowing the HTML5 to do the rest of the work for you. 您使用jquery强制仅重新呈现<OL>列表，允许HTML5为您完成剩余的工作。 Shown in this post ... how to "refresh" UL after adding new LI with jQuery? 在这篇文章中显示... 如何在使用jQuery添加新LI后“刷新”UL？

Option B 选项B.

Trigger a count of the fields & inject that number in to the <LI> item ... shown on Stackoverflow: Using jQuery to dynamically refresh an ordered list 触发字段计数并将该数字注入到Stackoverflow上显示的<LI>项目中：使用jQuery动态刷新有序列表

Update : 更新：

I took a pretty long wack at the recipes_controller.rb , the model & the views. 我在recipes_controller.rb ，模型和视图上花了很长时间。 I had to turn off kicksearch - as it wasn't worth trouble shooting to just get the controller running fully. 我不得不关闭kicksearch - 因为让控制器完全运行不值得解决问题。 Non-comprehensive list of stuff ... 非全面的东西清单......

I created a join table ( user_recipes.rb ) to handle look up better of recipe & users. 我创建了一个连接表（ user_recipes.rb ）来处理更好的配方和用户。
I make a before_action filter on your controller for @user. 我在你的控制器上为@user创建了一个before_action过滤器。 This replaces @recipe.user & helps with the Rails Way (allowing you flexibility in the future for devise & pundit/cancancan/whatever you eventually use to restrict access to records & pages). 这将取代@recipe.user并帮助使用Rails方式（允许您在将来灵活设计和专家/ cancancan /您最终用于限制对记录和页面的访问的任何内容）。
Some of your if statements for the edit / delete were not showing up, because you didn't have .id at the end of the current_user , which we fixed after going to the @user method 编辑/删除的一些if语句没有显示，因为你在current_user的末尾没有.id ，我们在转到@user方法后@user
I made a helper for is_owner ( recipes_helper.rb ) as there were 5 places you were testing it. 我为is_owner （ recipes_helper.rb ）做了一个帮助，因为你有5个地方在测试它。 I also removed the admin? 我也删除了管理员？ test as it's problematic where it was & just getting controller to execute. 测试它是什么问题，只是让控制器执行。 I had to include RecipeHelper at the top of the controller to make it work there. 我不得不在控制器顶部include RecipeHelper以使其在那里工作。
I pulled out the validation for user_id from recipes, it looks like you renamed the forgein_key there to chef_id anyways ... which I wouldn't have done because it means the helper I made for is_owner only works for recipe_controller instead of the whole app, & makes it more of a DSL versus easily being able to look at the thing. 我从食谱中取出了user_id的验证，看起来你将forgein_key重命名为chef_id无论如何...我不会这样做因为它意味着我为is_owner制作的is_owner只适用于recipe_controller而不是整个应用程序，并使其更像是一个DSL，而不是容易看到的东西。
I made a partial for gravatar ( views/recipes/_gravatar_section.html.erb ) & passed the @user in there as a local var 我为gravatar（ views/recipes/_gravatar_section.html.erb ）做了一个部分并将@user作为本地var传递给了

PS: I'm at the point now where the recipes run enough to test the jquery against ... will update more or you can watch the updates via the forked repo github , PS：我现在正处于配方运行足以测试jquery的地步......将更新更多或者你可以通过forked repo github观看更新，

Javascript Asset stuff ... Javascript资产的东西......

I did a rails rails assets:clean & the rails assets:precompile which I thought I'd mention just incase I hadn't already. 我做了一个rails rails assets:clean和rails assets:precompile我认为我会提到的rails assets:precompile只是因为我还没有。
The order of your /app/assets/javascript/application.js is wrong ... the //= require_tree . 您的/app/assets/javascript/application.js的顺序是错误的... //= require_tree . absolutely must be at the bottom or you're going to have issues including all the files. 绝对必须在底部，否则你将遇到包括所有文件在内的问题。
Additionally, you had two files which did not have the required, //= in front of them. 此外，您有两个没有所需的文件， //=在它们前面。
For some reason, you have app/assets/javascript/exercise.coffee showing up in the directory & that sometimes interferes with the loading of the exercise.js stuff. 出于某种原因，你有app/assets/javascript/exercise.coffee显示在目录中，有时会干扰exercise.js的加载。
I'm finding scripts in your view files instead of the assets files for javascript (not the end of the world - but makes it way harder to work with & easier to have the types of issues you're getting). 我在你的视图文件中找到脚本，而不是javascript的资产文件（不是世界末日 - 但是让你更难以使用并且更容易得到你遇到的问题类型）。
Sumo was generating 4 errors in the chrome console, so I commented that out Sumo在chrome控制台中生成了4个错误，所以我评论说出来了

Answer 2

Found out the datepicker going bad was a jquery conflict by brute force hand testing until I got a working version. 发现日期选择器变坏是一个jquery冲突蛮力手测试，直到我得到一个工作版本。

The culprit is one of these guys ... 罪魁祸首是其中一个......

//= require jquery-ui/datepicker
//= require jquery_ujs
//= require jquery.raty.min
//= require chosen-jquery
//= require bootstrap-sprockets
//= require raphael.min
//= require morris
//= require social-share-button
//= require html.sortable

I'd recommend slowly adding them one by one, in order of most trustworthy...till it breaks the javascript again. 我建议按照最值得信赖的顺序逐个添加它们......直到它再次打破javascript。 Your refresh of the ordering numbers should work if try it after pulling all the items above & the datepicker too (be sure to remove the datepicker script you put in your views) - read below for more on how trouble shoot these & fix them ... 如果在拉动上面的所有项目和日期选择器之后尝试它，那么您的订购号码刷新应该有效（请务必删除您在视图中添加的日期选择器脚本） - 请阅读以下内容，了解更多关于如何解决这些问题并解决它们的问题。。

Rails - asset pipeline Link - Javascript trouble shooting stuff ... Rails - 资产管道链接 - Javascript解决问题......

First we need to decide if it's a loading issue - Open the web browser console & check elements for your js file names ... saw the cocoon was loaded under the "elements" section 首先，我们需要确定它是否是一个加载问题 - 打开Web浏览器控制台并检查js文件名的elements ...看到cocoon加载在“elements”部分下
Opened the /layouts/application.html.erb file & ensured there was only one javascript_include_tag. 打开/layouts/application.html.erb文件并确保只有一个javascript_include_tag。
Also that the javascript_include_tag was in the tag & that the head tag is properly closed with 此外，javascript_include_tag位于代码中，并且head标记已正确关闭
Look for other non-essential or extra service loading files ... Sumo was generating 4 errors in the chrome console, so I commented that out 寻找其他非必要或额外的服务加载文件... Sumo在chrome控制台中生成4个错误，所以我评论了这一点
Checked the /app/assets/javascript folder for the application.js file, also that there's no .coffee files (rails autos them) ... for some reason, you have app/assets/javascript/exercise.coffee showing up in the directory 检查/ app / assets / javascript文件夹中的application.js文件，还有没有.coffee文件（rails autos them）...出于某种原因，你有app/assets/javascript/exercise.coffee出现在目录
Check inside the application.js file ... 检查application.js文件内部...
Check order of your /app/assets/javascript/application.js files being loaded ... yours is wrong ... the //= require_tree . 检查正在加载的/app/assets/javascript/application.js文件的顺序...你的错误... //= require_tree . ... absolutely must be at the bottom or you're going to have issues including all the files. ...绝对必须在底部，否则你将遇到包括所有文件在内的问题。
Additionally, you had two files which did not have the required, //= in front of them. 此外，您有两个没有所需的文件， //=在它们前面。 It's required to load them 它需要加载它们
Ensure no extra scripts being loaded in the views, I go to my working dir & grep -r 'script' /app & check any spot that shows up ... I'm finding scripts in your view files instead of the assets files for javascript ... If the asset asset is loading, we know it's either a conflict or poorly written code 确保视图中没有加载额外的脚本，我转到我的工作目录和grep -r 'script' /app并检查显示的任何位置...我在您的视图文件中找到脚本而不是资源文件javascript ...如果资产资产正在加载，我们知道它是冲突或编写得不好的代码
Insert a piece of test code in the console so when the $.document or the turbolinks finished loading to see if it's poor code ... they will report to console a string ("Page -- Loaded") in my case, 在控制台中插入一段测试代码，这样当$ .document或turbolinks完成加载以查看代码是否很差时...他们会在我的情况下向控制台报告一个字符串（“Page - Loaded”），
If it doesn't load, it's a conflict with other java files, if it loads, it's just your code needs to be fixed 如果它没有加载，它与其他java文件冲突，如果加载，只需要修复你的代码
I pull all the entries from the application.js except a test.js file (look up how to capture to log js to console) 我从application.js中提取所有条目，除了test.js文件（查找如何捕获到日志js到控制台）
At this point it should work if everything before it passed ... if not you might have corrupt files ... you should go into application.html.erb & use javascript_include_tag to include a CDN version of Jquery (google it) 在这一点上它应该工作，如果它前面的一切都通过...如果不是你可能有损坏的文件...你应该进入application.html.erb并使用javascript_include_tag包括一个CDN版本的Jquery（谷歌它）
Assuming the test.js works ... ... first, in your app/assets/javascript/application.js , at the bottom of the file up the //= . 假设test.js有效......首先，在你的app/assets/javascript/application.js ，在文件的底部向上//= . & save it ... ... now, you should re-add your js files to the app/assets/javascript one at a time, testing each time by refreshing the ... ... webpage, possibly restarting the server after copying the file in & doing a rake or rails assets like shown below ... rails assets:clean & the rails assets:precompile 保存它......现在，你应该一次一个地将你的js文件重新添加到app/assets/javascript ，每次刷新......网页进行测试，之后可能重新启动服务器复制文件并执行rake或rails资产，如下所示... rails assets:clean ＆the rails assets:precompile

问题 <ol><li> 使用rails partial和cocoon gem实现

问题描述

2 个解决方案

解决方案1
0 2017-03-09 20:13:06

解决方案2
0 2017-03-22 21:33:21

问题 <ol><li> 使用rails partial和cocoon gem实现

问题描述

2 个解决方案

解决方案1 0 2017-03-09 20:13:06

解决方案2 0 2017-03-22 21:33:21

解决方案1
0 2017-03-09 20:13:06

解决方案2
0 2017-03-22 21:33:21