渲染收集部分

从Using Ajax and jQuery in Rails 5 Apps教程（该项目可在bparanj/ckl找到）并给予下述的观点和部分：渲染收集部分

应用程序/视图/任务/ index.html.erb：

<h1>Task Dog</h1> 

<%= link_to "New Task", new_task_path, id: "new_link" %> 

<h2>Incomplete Tasks</h2> 
<div class="tasks" id="incomplete_tasks"> 
    <%= render @incomplete_tasks %> 
</div> 

<h2>Complete Tasks</h2> 
<div class="tasks" id="complete_tasks"> 
    <%= render @complete_tasks %> 
</div>

应用程序/视图/任务/ _task.html.erb：

<%= form_for task do |f| %> 
    <%= f.check_box :complete %> 
    <%= f.submit "Update" %> 
    <%= f.label :complete, task.name %> 
    <%= link_to "(remove)", task, method: :delete, data: {confirm: "Are you sure?"} %> 
<% end %>

该问题的任何元件上点击仅选择第一项目（如下所示），这使得我认为该部分是被rendere d不正确。

关于rendering collection的导轨指南，我无法找到答案。

为什么<%= f.label :complete, task.name %>行不按预期工作？

关于点击baz：

点击baz期待baz得到检查，而是foo被选中（注：实际复选框工作，但不是旁边的复选框文本）：

编辑：

注意我对作者提交之前将Ajax：

curl http://localhost:3000/tasks | pbcopy

提供了以下的html：

git checkout 1bb43bd

捆绑，并启动服务器后

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Ckl</title> 
    <meta name="csrf-param" content="authenticity_token" /> 
<meta name="csrf-token" content="xlNcxfUn9NoUFZGrmeRGaK9uNhz01F43vs0ATt9qb+XIk414hTj37YZxDo1mAm3VOT7otj/qMgB+FLVaNsn8Aw==" /> 

    <link rel="stylesheet" media="all" href="/assets/layout.self-cc3852a9caa9db7dd4f2a4f654027564a1cb5bd14f24754194e6fd3129377e24.css?body=1" data-turbolinks-track="reload" /> 
<link rel="stylesheet" media="all" href="/assets/tasks.self-d679d83f2b24213289ec1a5948d0d54ec9798f954c5a996908ed19a7a108c6bf.css?body=1" data-turbolinks-track="reload" /> 
<link rel="stylesheet" media="all" href="/assets/application.self-af04b226fd7202dfc532ce7aedb95a0128277937e90d3b3a3d35e1cce9e16886.css?body=1" data-turbolinks-track="reload" /> 
    <script src="/assets/jquery.self-660adc51e0224b731d29f575a6f1ec167ba08ad06ed5deca4f1e8654c135bf4c.js?body=1" data-turbolinks-track="reload"></script> 
<script src="/assets/jquery_ujs.self-e87806d0cf4489aeb1bb7288016024e8de67fd18db693fe026fe3907581e53cd.js?body=1" data-turbolinks-track="reload"></script> 
<script src="/assets/turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js?body=1" data-turbolinks-track="reload"></script> 
<script src="/assets/action_cable.self-1641ec3e8ea24ed63601e86efcca7f9266e09f390e82199d56aa7e4bd50e1aa9.js?body=1" data-turbolinks-track="reload"></script> 
<script src="/assets/cable.self-6e0514260c1aa76eaf252412ce74e63f68819fd19bf740595f592c5ba4c36537.js?body=1" data-turbolinks-track="reload"></script> 
<script src="/assets/tasks.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> 
<script src="/assets/application.self-b89234cf2659d7fedea75bca0b8d231ad7dfc2f3f57fcbaf5f44ed9dc384137b.js?body=1" data-turbolinks-track="reload"></script> 
    </head> 

    <body> 
    <div id="container"> 
     <h1>Task Dog</h1> 

<a id="new_link" href="/tasks/new">New Task</a> 

<h2>Incomplete Tasks</h2> 
<div class="tasks" id="incomplete_tasks"> 
    <form class="edit_task" id="edit_task_4" action="/tasks/4" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="_method" value="patch" /><input type="hidden" name="authenticity_token" value="+1mGLeoE51+7p+uDVQmI2QCxwvbmuNRw4lnMEJbB25vekwOBavFs/Efo4X3AD5FMTE2EwJym4o462aUQjzda2w==" /> 
    <input name="task[complete]" type="hidden" value="0" /><input type="checkbox" value="1" name="task[complete]" id="task_complete" /> 
    <input type="submit" name="commit" value="Update" data-disable-with="Update" /> 
    <label for="task_complete">foo</label> 
    <a data-confirm="Are you sure?" rel="nofollow" data-method="delete" href="/tasks/4">(remove)</a> 
</form> 
<form class="edit_task" id="edit_task_5" action="/tasks/5" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="_method" value="patch" /><input type="hidden" name="authenticity_token" value="dnc364MuSvkRuVLLRBnEG6cfoABSeoui7Iq729wmWQRgAxizDoT2oetX5WDSoITSQIs6Bi4GoGrkEqJicU6lhg==" /> 
    <input name="task[complete]" type="hidden" value="0" /><input type="checkbox" value="1" name="task[complete]" id="task_complete" /> 
    <input type="submit" name="commit" value="Update" data-disable-with="Update" /> 
    <label for="task_complete">bar</label> 
    <a data-confirm="Are you sure?" rel="nofollow" data-method="delete" href="/tasks/5">(remove)</a> 
</form> 
<form class="edit_task" id="edit_task_6" action="/tasks/6" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="_method" value="patch" /><input type="hidden" name="authenticity_token" value="HW9YKsH9ETOugVJT0IkttgUwdjlUNL/MpXSjWagYJLG5fmjjZZWqInSEuQE2yhNmAOZkIFPeyd2leT3nia0g8g==" /> 
    <input name="task[complete]" type="hidden" value="0" /><input type="checkbox" value="1" name="task[complete]" id="task_complete" /> 
    <input type="submit" name="commit" value="Update" data-disable-with="Update" /> 
    <label for="task_complete">baz</label> 
    <a data-confirm="Are you sure?" rel="nofollow" data-method="delete" href="/tasks/6">(remove)</a> 
</form> 

</div> 

<h2>Comlpete Tasks</h2> 
<div class="tasks" id="complete_tasks"> 

</div> 

    </div> 
    </body> 
</html>

来源

2017-02-13 mbigras

你有GitHub上或类似平台的代码？我想检查一下。 –

[bparanj/ckl]（https://github.com/bparanj/ckl） – mbigras

你可以给我们看一下这组任务生成的原始html吗？这将帮助我们告诉发生了什么。 –

好，所以看着原始的html我注意到每个复选框都有相同的html id：

id="task_complete"

这就是问题源于...

我不知道为什么你的浏览器是通过检查只具有该ID的第一个复选框反应是，但它是在HTML中给定的要求，即id在整个html页面中必须是唯一的（如果你不这样做的话，这种行为是不能保证的）。

所以......现在我们知道问题是什么......现在你只需要弄清楚如何解决它。 ;）

您可以测试这个理论在一个唯一的ID手动传递每个复选框比如像（注意不是bug的测试）：

<%= f.check_box :complete, :id => "task_complete_#{task.id}" %>

来源

2017-02-13 02:33:52

那么你是说点击行为只是一些意想不到的副作用，而任务标签从来没有打算点击？ – mbigras

任务标签可能是可点击的......但如果是这样的话，它也会遇到同样的问题......当你点击它时......浏览器将假设有一个唯一的元素id为task_complete '并且将通过该页面查看该ID的第一个实例...这是列表中的第一个实例 - 这是将被“检查”的那个实例。因此，为了使您的代码正常工作，您需要确保id是唯一的，并且标签与id匹配 –

渲染收集部分

回答

相关问题