Dabbling with Turbo

Episode #326 by Teacher's Avatar David Kimura

Summary

In this episode, we explore some of the new features with Turbo and interactions that we can do with little or no javascript.
7.0 hotwire rails turbo 13:49

Resources

Summary

# ~/.railsrc
--skip-jbuilder
--javascript esbuild
--css bootstrap
-m ~/driftingruby/template.rb

# projects/index.html.erb
<h1>Project List</h1>
<% @projects.each do |project| %>
  <%= turbo_frame_tag dom_id(project), src: project_path(project) %>
<% end %>

<h1>Project Table</h1>

<table class='table'>
  <thead>
    <th>Name</th>
    <th>Active</th>

    <th colspan=3>Actions</th>
  </thead>
  <tbody>
    <% @projects.each do |project| %>
      <tr>
        <td><%= project.name %></td>
        <td><%= project.active %></td>

        <td><%= link_to "Show", project_path(project) %></td>
        <td><%= link_to "Edit", edit_project_path(project) %></td>
        <td>
          <%= link_to "Delete", project_path(project),
            "data-turbo-method": :delete,
            "data-turbo-confirm": "Are you sure?" %>
        </td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to "New project", new_project_path %>

# projects/_project.html.erb
<%= turbo_frame_tag dom_id(project) do %>
  <%= turbo_stream_from project %>

  <p>
    <strong>Name:</strong>
    <%= project.name %>
  </p>

  <p>
    <strong>Active:</strong>
    <%= project.active %>
  </p>

  <div>
    <%= link_to "Edit", edit_project_path(project), target: "_top" %> |
    <%= link_to "Destroy", project_path(project),
            "data-turbo-method": :delete,
            "data-turbo-confirm": "Are you sure?" %> |
    <%= link_to "Back to projects", projects_path, target: "_top" %>
  </div>
<% end %>