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

Posted

技术标签:

【中文标题】<ol> <li> 使用 rails partial 和 cocoon gem 实现的问题【英文标题】：Issue with <ol> <li> implementation with rails partial and cocoon gem 【发布时间】：2017-07-08 10:44:48 【问题描述】：

在我的 rails 应用程序中实现有序列表时遇到了一些问题。我一直在将茧宝石用于一些嵌套表单，并且一切正常工作功能，但是，我似乎无法呈现有序列表以使嵌套表单更具可读性。

开始我的代码看起来像这样 _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>');

应用程序.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 .

应用程序.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.等。我试过移动

    和 ，但这是我最接近的。

    我希望为每个渲染的新嵌套表单部分显示 1、2、3 等，以便更清楚地显示哪个与哪个重合。我该怎么做呢？我在正确的道路上吗？

    谢谢，

【问题讨论】：

你能显示部分的motion_fields吗？ 嘿，maxple，这是移动字段的部分代码 好的，所以当你点击添加按钮时你想要一个数字，空白输入对吗？ 【参考方案1】：

原文：

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

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

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

选项 A

您使用 jquery 仅强制 &lt;OL&gt; 列表再次呈现，允许 HTML5 为您完成其余的工作。显示在这篇文章中...how to "refresh" UL after adding new LI with jQuery?

选项 B

触发字段计数并将该数字注入 &lt;LI&gt; 项目... *** 上显示：Using jQuery to dynamically refresh an ordered list

更新：

我对@9​​87654328@、模型和视图花了很长时间。我不得不关闭 kicksearch——因为仅仅让控制器完全运行是不值得的。不全面的东西清单...

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

PS：我现在已经到了足以测试 jquery 的配方的地步……将会更新更多，或者您可以通过分叉的 repo github 观看更新，

Javascript 资产的东西 ...

我做了一个 rails rails assets:clean 和 rails assets:precompile，我想我会提到以防万一我还没有。 /app/assets/javascript/application.js 的顺序错误...//= require_tree . 绝对必须在底部，否则您将遇到包括所有文件在内的问题。 此外，您还有两个文件没有所需的 //= 在它们前面。 出于某种原因，您在目录中显示了app/assets/javascript/exercise.coffee，这有时会干扰exercise.js 内容的加载。 我在您的视图文件中找到脚本，而不是在 javascript 的资产文件中找到（不是世界末日 - 但更难处理和更容易处理您遇到的问题类型）。 Sumo 在 chrome 控制台中生成了 4 个错误，所以我将其注释掉

【讨论】：

非常感谢@Mirv，我几乎放弃了解决这个问题的希望。对于其他阅读者，我发现第一种方法更容易实现 @J.Schimdt 很高兴它起作用了 - 不要忘记标记已回答的问题 - 它有助于 *** 分类并告诉人们是否应该阅读问题以寻求帮助 嗨@Mirv，这听起来很奇怪，但你给我的第一个选项是通过插入 $('#list').html('foo');但我以某种方式设法打破它。我不得不从 git hub 克隆我的项目，因为我的电脑坏了，现在突然它不起作用了。但我不确定我做了什么。你有没有机会向我解释如何让选项 2 起作用。我发现 javascript 非常令人困惑，无法理解如何实现我的问题的答案。 如果你有一个可以工作的版本，我会很想坚持下去，只要弄清楚环境。可能由于视图中来自app/views/layouts/application.html.erb 的javascript_include_tag 文件不在标题中//app/assests/javascript/application.js 中缺少，或者甚至可能是重复的 jquery 文件，您的所有 jquery 内容都无法正常工作。您应该测试并查看是否可以记录到控制台回调，它只是说“嗨”之类的......如茧制造商所示......***.com/questions/42080359/… 谢谢:)。幸运的是，我也刚买了一本关于测试的书！【参考方案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。如果在拉动以上所有项目和日期选择器后尝试刷新订购号应该会起作用（请务必删除您放入视图中的日期选择器脚本） - 请阅读以下内容以了解如何解决这些问题并修复它们.. .

Rails - 资产管道Link - Javascript 故障排除...

首先我们需要确定这是否是加载问题 - 打开 Web 浏览器控制台并检查 elements 以获取您的 js 文件名 ...看到茧被加载到“元素”部分下 打开 /layouts/application.html.erb 文件并确保只有一个 javascript_include_tag。 另外，javascript_include_tag 在标签中，并且 head 标签用 正确关闭 寻找其他非必要或额外的服务加载文件 ... Sumo 在 chrome 控制台中产生了 4 个错误，所以我将其注释掉 检查了 /app/assets/javascript 文件夹中的 application.js 文件，也没有 .coffee 文件（rails 自动处理它们） ...由于某种原因，您在目录中显示了app/assets/javascript/exercise.coffee 检查 application.js 文件内部... 检查 /app/assets/javascript/application.js 文件的加载顺序 ...你的错了...//= require_tree . ...绝对必须在底部，否则您将遇到包括所有文件在内的问题。 此外，您有两个文件没有所需的 //= 在它们前面。需要加载它们 确保视图中没有加载额外的脚本，我转到我的工作目录和grep -r 'script' /app 并检查出现的任何位置 ...我在您的视图文件中找到脚本，而不是 javascript 的资产文件... 如果资产正在加载，我们知道这是冲突或代码编写不佳 在控制台中插入一段测试代码，以便在 $.document 或 turbolinks 完成加载时查看它是否是糟糕的代码 ...在我的情况下，他们将向控制台报告一个字符串（“Page -- Loaded”）， 如果不加载，是与其他java文件冲突，如果加载，只是你的代码需要修复 我从 application.js 中提取除 test.js 文件之外的所有条目（查看如何捕获以将 js 记录到控制台） 此时，如果之前的一切都通过了，它应该可以工作......如果没有，你可能有损坏的文件 ...您应该进入 application.html.erb 并使用 javascript_include_tag 包含 Jquery 的 CDN 版本（google it） 假设 test.js 工作... ...首先，在您的app/assets/javascript/application.js 中，在文件底部向上//= . 并保存... ...现在，您应该一次将一个 js 文件重新添加到 app/assets/javascript，每次都通过刷新 ... ...网页，可能在复制文件并执行 rake 或 rails 资产后重新启动服务器，如下所示 ... rails assets:clean & rails assets:precompile

【讨论】：

以上是关于<ol> <li> 使用 rails partial 和 cocoon gem 实现的问题的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 jquery 在单击事件上将 <li> 附加到另一个 <ol>？

ul ol li的序号编号样式

ol 与ul 的区别

div span ul ol 区别

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

ul ol di三者区别