Can't get cocoon to work on Ruby on Rails 4

问题

I've been battling trying to get this working for the last few hours, and I just can't for some reason. I've followed the steps almost exactly as indicated on the github repository link.

I created a new application using all of the following steps:

# rails new demo_app
# cd demo_app/
+++ added gem 'cocoon' to the Gemfile
+++ added //= require cocoon to the application.js file
# rails g scaffold Project name:string description:string
# rails g model Task description:string done:boolean project:belongs_to
+++ added has_many :tasks to the Project model
+++ added :_destroy to the permit in my projects_controller.rb file
# bundle install

Here is my views/projects/_form.html.erb file:

<%= form_for(@project) do |f| %>
  <% if @project.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@project.errors.count, "error") %> prohibited this project from being saved:</h2>

      <ul>
      <% @project.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :name %><br>
    <%= f.text_field :name %>
  </div>
  <div class="field">
    <%= f.label :description %><br>
    <%= f.text_field :description %>
  </div>
  <%= f.fields_for :tasks do |task| %>
    <%= render 'task_fields', :f => task %>
    <%= link_to_add_association 'Add task', f, :tasks, class: "links" %>
  <% end %>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

Now here's my views/projects/_task_fields.html.erb file:

 <div id="nested-fields">
  <div class="field">
      <%= f.label :description %><br>
      <%= f.text_field :description %>
  </div>

  <div class="field">
      <%= f.label :description %><br>
      <%= f.text_field :description %>
  </div>
  <%= link_to_remove_association 'remove task', f %>
 </div>

Is this not exactly what the guide mentions? When I go to create a new project, it shows nothing but the default Name label, name text box, description label, description textbox, and the "create project link". Here's the HTML output of the new project form:

<!DOCTYPE html>
<html>
<head>
  <title>DemoApp</title>
  <link data-turbolinks-track="true" href="/assets/projects.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
  <script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/projects.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/cocoon.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
  <meta content="authenticity_token" name="csrf-param" />
<meta content="uIpLnix47UNaBONCR+0SV/uz1uiulU6BHqKe5qENzHQ=" name="csrf-token" />
</head>
<body>

<h1>New project</h1>

<form accept-charset="UTF-8" action="/projects" class="new_project" id="new_project" method="post"><div style="display:none"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="uIpLnix47UNaBONCR+0SV/uz1uiulU6BHqKe5qENzHQ=" /></div>

  <div class="field">
    <label for="project_name">Name</label><br>
    <input id="project_name" name="project[name]" type="text" />
  </div>
  <div class="field">
    <label for="project_description">Description</label><br>
    <input id="project_description" name="project[description]" type="text" />
  </div>
    <div class="actions">
    <input name="commit" type="submit" value="Create Project" />
  </div>
</form>

<a href="/projects">Back</a>


</body>
</html>

Can someone please assist me with this? It looks like I'm doing everything as mentioned in the guide, and I'm not getting anything out of this.

回答1:

The link_to_add_association should be located outside the fields_for tag, whatever is inside it will be replicated for each task added and you generally only want a link to add at the end, also nothing shows because no task is instantiated, in order to instantiate one you either click the link_to_add_association or instantiate them on the projects form creation, this can be done at the projects controller new action by doing

#projects_controller.rb
def new
    @project = Project.new 
    @projet.tasks.build
end

You can also instantiate multiple tasks on form creation here by doing some loop like

3.times do
  @project.tasks.build
end

来源：https://stackoverflow.com/questions/26346850/cant-get-cocoon-to-work-on-ruby-on-rails-4

标签

ruby-on-rails

cocoon-gem