javascript - Ruby on Rails 仪表板部分

Question

我想制作一个任务仪表板，但有一些问题。

我想要实现的目标:我想在一个页面上显示多个相互响应的部分。当您转到仪表板时，您有两列。第一列显示包含所有任务的列表，第二列显示您在第一列中单击的其中一个任务的详细信息(或自动显示列表中最后完成的任务)

图像来可视化我想要实现的目标: https://gyazo.com/e87acf214e255817cdb03a22e3a35c4d

此时我的文件如下所示:

application.html.erb

<div class="main-content">
<section id="tasks">
    <div class="wrapper">
      <%= render partial: 'task_lists/index', collection: @task_lists %>
    </div>
</section>

<section id="description">
  <%= render partial: 'task_lists/show', collection: @task_lists %>
</section>

<%= yield %>

<%= render partial: 'task_lists/index', collection: @task_lists %>已经可以工作，因此每项任务都列在一列中。问题是<%= render partial: 'task_lists/show', collection: @task_lists %> ，不起作用。

这是“损坏的”部分链接到的_show.html.erb:

<div class="row">
<div class="task_image">
    <img src="../images/phone_img.png"></img>
</div>
<div class="task_heading">
    <h1><%= @task_list.title %></h1>
    <p class="user_info">For <%= @task_list.client_email %></p>
</div>

<div class="task_content">
  <%= render @task_list.task_items %>
</div>

<div class="task_finish">
    <div class="row">
        <p>Finish task</p>
    </div>
</div>

当我运行该项目时，Rails 说文件 _show.html.erb 中的 ID 未定义。

我的问题:除非有人单击其他任务，否则如何使 Rails 自动选择第一个任务？因此，当您进入仪表板时，您会在第一列中看到任务列表，Rails 会自动选择第一个任务并在第二列中显示其详细信息 (_show.html.erb)。当您单击第一列中的其他任务时，您将在第二列中看到该任务的详细信息。这在 Rails 或 JQUERY/javascript 中可能吗？

我希望我的问题很清楚，否则请告诉我。

提前致谢。

Answer 1

我认为你应该只将一项任务传递给显示部分而不是列表。你可以做类似的事情

<%= render partial: "task_list/show", object: @task_list.selected %>

接下来，您需要一种方法来识别事件/选定的任务(例如，实现我刚刚提出的 selected 方法)。这可能是当用户单击任务时设置的任务属性？

此外，看到您的设计，我认为如果您使用 javascript/css 在前端执行此操作会更好，但这可能是下一步。

希望这有帮助，否则请告诉我!