[RUBY] [Rails 6] So erstellen Sie mit cocoon einen dynamischen Formular-Eingabebildschirm

Einführung

Ziel dieses Artikels ist es, das folgende Eingabeformular zu erstellen.

Überblick

Erstellen einer Funktion zum Speichern des Rezepts und der für das Rezept erforderlichen Zutaten zusammen in der DB

Tabellenstruktur

Da das Rezept und die Zutaten des Rezepts in einer Eltern-Kind-Beziehung stehen, ist die Tabellenstruktur wie folgt. Eltern: Rezepte Kind: Zutaten für das Rezept (prescription_ingredients)

• Ingredient_id wird von activie_hash implementiert

Implementierung

Wir werden in der folgenden Reihenfolge durchführen.

1. 1. Einführung von jquery
2. Einführung des Kokons
3. 3. Modell erstellen
4. Controller erstellen
5. Ansicht erstellen

1. 1. Einführung von jquery

Installieren Sie jquery, um Cocoon mit Rails6 verwenden zu können.

$ yarn add jquery 

Bearbeiten Sie config / webpack / environment.js

config/webpack/environment.js

const { environment } = require('@rails/webpacker')

#Nachtrag von hier
const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery'
    })
)
#Nachtrag bis hierher

module.exports = environment

2. Einführung des Kokons

Einführung von Edelstein

Gemfile

gem 'cocoon'

$ bundle install

Bibliothek hinzufügen

$ yarn add github:nathanvda/cocoon#c24ba53

Nach der Ausführung ist es in Ordnung, wenn Sie die folgenden zwei Elemente löschen können. ・ App / assets / javascripts / cocoon.js wurde erstellt -Die folgende Beschreibung wurde zu package.json hinzugefügt

package.json

"cocoon": "github:nathanvda/cocoon#c24ba53"

Fügen Sie abschließend den folgenden Inhalt zu app / javascriptspacks / application.js hinzu

app/javascriptspacks/application.js

require('jquery')
import "cocoon";

3. 3. Modell erstellen

Die Beschreibung, die sich nicht auf den Inhalt dieser Implementierung bezieht, wird weggelassen.

Modell erstellen

$ rails g model Recipe
$ rails g model RecipeIngredient

Migrationsdatei bearbeiten

class CreateRecipes < ActiveRecord::Migration[6.0]
  def change
    create_table :recipes do |t|
      t.string     :name,     null: false
      t.timestamps
    end
  end
end

class CreateRecipeIngredients < ActiveRecord::Migration[6.0]
  def change
    create_table :recipe_ingredients do |t|
      t.references :recipe,            null: false, foreign_key: true
      t.integer    :ingredient_id,     null: false
      t.integer    :quantity,          null: false
      t.timestamps
    end
  end
end

Führen Sie die Migration durch

$ rails db:migrate

Zuordnungseinstellungen

recipe.rb

class Recipe < ApplicationRecord
  has_many :recipe_ingredients, dependent: :destroy
  accepts_nested_attributes_for :recipe_ingredients
end

recipe_ingredient.rb

class RecipeIngredient < ApplicationRecord
  belongs_to :recipe
end

accepts_nested_attributes_for Die Daten des angegebenen Modells können als Array in die Parameter aufgenommen werden. Mit anderen Worten, Sie können die Daten sowohl des Rezept- als auch des Rezept-Inhalts-Modells zusammen speichern.

4. Controller erstellen

Controller erstellen

$ rails g controller recipes new create

Bearbeiten Sie den Inhalt des Controllers

recipes_controller.rb

class RecipesController < ApplicationController
  def new
    @recipe = Recipe.new
    @recipe_ingredients = @recipe.recipe_ingredients.build
  end

  def create
    @recipe = Recipe.new(recipe_params)
    if @recipe.save
      redirect_to root_path
    else
      render action: :new
    end
  end

  private

  def recipe_params
    params.require(:recipe).permit(:name, recipe_ingredients_attributes: [:id, :ingredient_id, :quantity, :_destroy])
  end
end

Das in accept_nested_attributes_for,. Ich habe es params als prescription_ingredients_attributes: [] hinzugefügt und gesendet.

5. Ansicht erstellen

Wie beim Modell wird die Beschreibung, die diesmal nicht mit dem Implementierungsinhalt zusammenhängt, weggelassen.

• Da der Klassenname usw. nicht beschrieben werden, wird das Layout beschädigt, wenn dieser Code unverändert verwendet wird.

ruby:recipes/new.html.erb

<%= form_with model: @recipe, url: '/recipes', method: :post, local: true do |f| %>

  <!--Rezeptname-->
  <%= f.text_area :name %>

  <!--Zutaten-Eingabefeld-->
  <%= f.fields_for :recipe_ingredients do |t| %>
    <%= render "recipes/recipe_ingredient_fields", f: t %>
  <% end %>

  <!--Schaltfläche Zutaten hinzufügen-->
  <%= link_to_add_association "hinzufügen", f, :recipe_ingredients %>
<% end %>

fields_for Sie können verschiedene Modelle in form_with bearbeiten.

ruby:recipes/_recipe_ingredient_fields.html.erb

<div class="nested-fields">
    <%= f.collection_select(:ingredient_id, {}, :id, :name, {}) %>
    <%= f.number_field :quantity %>
    <div>Stücke</div>
    <%= link_to_remove_association "Löschen", f %>
</div>

Der Bereich, der von dem von der Klasse für verschachtelte Felder angegebenen div-Tag umgeben ist, ist der Bereich, der hinzugefügt / gelöscht werden soll.

Achten Sie auf den zu rendernden Teilvorlagennamen. Wenn es nicht "_child model_fields.html.erb" ist, tritt ein Fehler auf.

Danke für deine harte Arbeit. Mit dem oben Gesagten denke ich, dass Sie ein dynamisches Eingabeformular erstellen können.

Referenz

Einführung des Kokons in Rails 6 Richten Sie ein Cocoon-Juwel ein, das verschachtelte Formulare in einer Webpack-Umgebung präzise implementieren kann

Informationen zum Erstellen eines dynamischen Eingabeformulars [Rails] So speichern Sie mit cocoon mehrere Daten gleichzeitig in einer Eltern-Kind-Beziehungstabelle

Über fields_for So verwenden Sie fields_for well