Question

我在rails应用程序中实现有序列表时遇到了一些麻烦。我一直在使用cocoon gem来获得一些嵌套的表单和一切正常工作的功能，但是，我似乎无法呈现一个有序列表来使嵌套表单更具可读性。

启动我的代码看起来像这样 _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

<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

$(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

//= 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

<!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>

目前，此代码为第一个列表项呈现1.但是，当我点击“添加动作”时它不会为表格的每个连续部分呈现2. 3. 4.等。我试过移动＆lt;醇＆GT;和＆lt; li＆gt;周围，但这是我最接近的。

我希望为每个新呈现的嵌套表单部分显示1,2,3等用户，这样就可以更清楚地与哪个一致。我该怎么做呢？我在正确的道路上吗？

谢谢，

Answer 1

<强>原始

所以问题是当你的jquery触发添加字段时，5之前的html不呈现。

这里的解决方案是开放式的，您可以使用任意数量的技术来解决问题，因为它与cocoon或rails无关。

我的建议是因为你已经有了cocoon，只需将下面两个选项中的一个放入自定义cocoon回调文件（app/assets/javascript/）中，就可以使用插入后回调来... ...

选项A

您使用jquery强制仅重新呈现<OL>列表，允许HTML5为您完成剩余的工作。这篇文章中显示了...... how to "refresh" UL after adding new LI with jQuery?

选项B

触发字段计数＆amp;将该数字注入Stackoverflow上显示的<LI>项目：Using jQuery to dynamically refresh an ordered list

<强>更新：

我对recipes_controller.rb，模型＆amp;观点。我不得不关闭kicksearch - 因为让控制器完全运行不值得解决问题。非全面的东西清单......

我创建了一个连接表（user_recipes.rb），以便更好地查找配方＆amp;用户。
我在你的控制器上为@user创建了一个before_action过滤器。这取代@recipe.user＆amp;有助于Rails方式（允许您在未来灵活设计＆amp; pundit / cancancan /您最终用来限制对记录和页面的访问）。
您编辑/删除的部分if语句未显示，因为.id末尾没有current_user，我们在转到{{1}后修复了@user方法
我为is_owner（recipes_helper.rb）做了一个帮助，因为有5个地方在测试它。我也删除了管理员？测试它在哪里和它的问题只是让控制器执行。我不得不在控制器的顶部include RecipeHelper使其在那里工作。
我从食谱中取出了user_id的验证，看起来你将forgein_key重命名为chef_id了...我不会这样做，因为它意味着我为{{1}做的助手}仅适用于recipe_controller而不是整个应用程序，＆amp;使它更像是一个DSL，而不是很容易看到这个东西。
我为gravatar（is_owner）＆amp;传递views/recipes/_gravatar_section.html.erb作为本地var

PS：我现在正处于配方运行足以测试jquery的地步......将更新更多，或者您可以通过分叉回购github观看更新，

Javascript资产......

我做了一个导轨@user＆amp;我认为我会提到的rails assets:clean只是因为我还没有。
您的/app/assets/javascript/application.js的顺序是错误的...... rails assets:precompile绝对必须位于底部，否则您将遇到包括所有文件在内的问题。
此外，您还有两个文件没有，//= require_tree .位于其前面。
由于某种原因，您在目录中显示//=＆amp;这有时会干扰app/assets/javascript/exercise.coffee内容的加载。
我在你的视图文件中找到了脚本，而不是javascript的资源文件（不是世界末日 - 但是让你更难以使用并且更容易解决你遇到的问题类型）。
Sumo在chrome控制台中生成了4个错误，所以我评论了

Answer 2

发现日期选择器变坏是一个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

我建议按照最值得信赖的顺序逐个添加它们......直到它再次打破javascript。如果在拉出上面的所有项目之后试一试，那么您订购号码的刷新应该有效。 datepicker也是（一定要删除你在视图中添加的日期选择器脚本） - 请阅读下面的内容，了解更多关于如何解决这些问题的问题。解决它们......

Rails - 资产管道Link - Javascript解决问题......

首先我们需要确定它是否是一个加载问题 - 打开Web浏览器控制台＆amp;检查elements是否有js文件名 ......看到茧被装在“元素”部分
打开/layouts/application.html.erb文件＆amp;确保只有一个javascript_include_tag。
此外，javascript_include_tag位于代码＆amp;使用
查找其他非必要或额外的服务加载文件 ... Sumo在chrome控制台中生成了4个错误，所以我评论了
检查/ app / assets / javascript文件夹中的application.js文件，还有没有.coffee文件（rails autos them） ...出于某种原因，您在目录

app/assets/javascript/exercise.coffee

检查application.js文件...
检查正在加载的/app/assets/javascript/application.js文件的顺序 ......你错了...... //= require_tree . ...绝对必须在底部，否则你将遇到包括所有文件在内的问题。
此外，您有两个文件，它们前面没有必需的//=。它需要加载它们
确保视图中没有加载额外的脚本，我转到我的工作目录＆amp; grep -r 'script' /app＆amp;检查出现的任何地方 ...我在您的视图文件中找到脚本而不是javascript的资源文件... 如果资产资产正在加载，我们知道它是冲突或编写不良的代码
在控制台中插入一段测试代码，以便在$ .document或turbolinks加载完成后查看代码是否很差 ...他们将在我的案例中报告一个字符串（“Page - Loaded”），
如果没有加载，则与其他java文件冲突，如果加载，只需要修复代码
我从application.js中提取所有条目，除了test.js文件（查找如何捕获到日志js到控制台）
此时它应该可以工作，如果它之前的一切都通过...如果不是你可能有损坏的文件 ...你应该进入application.html.erb＆amp;使用javascript_include_tag包含JNery（google it）的CDN版本
假设test.js正常工作...... ...首先，在app/assets/javascript/application.js，文件底部的//= .＆amp;保存 ... ...现在，你应该一次将你的js文件重新添加到app/assets/javascript，每次通过刷新来测试... ...网页，可能在复制文件后重启服务器＆amp;做rake或rails资产，如下所示 ...... rails assets:clean＆amp; rails assets:precompile

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

2 个答案: