Einführung
Wenn Sie mit einem Ruby on Rails -Projekt arbeiten, können Ihre Anforderungen Interaktivität mit dem von https://guides.rubyonrails.org/v5.2/action_view_overview.html generierten HTML-Code enthalten [Vorlagen ansehen]. In diesem Fall haben Sie einige Möglichkeiten, wie Sie diese Interaktivität implementieren können.
Beispielsweise könnten Sie ein JavaScript Framework wie React oder https://emberjs.com implementieren /[Glut]. Wenn Ihre Anforderungen den Verarbeitungsstatus auf der Clientseite umfassen oder wenn Sie Leistungsprobleme im Zusammenhang mit häufigen Anfragen an den Server befürchten, ist die Auswahl eines dieser Frameworks möglicherweise sinnvoll. Viele Single Page Applications (SPAs) verfolgen diesen Ansatz.
Bei der Implementierung eines Frameworks, das den Status und häufige Aktualisierungen auf der Clientseite verwaltet, sind jedoch mehrere Aspekte zu berücksichtigen:
-
Es ist möglich, dass Anforderungen zum Laden und Konvertieren, z. B. das Parsen von JavaScript und das Abrufen und Konvertieren von JSON in HTML, die Leistung einschränken.
-
Wenn Sie sich für ein Framework entscheiden, müssen Sie möglicherweise mehr Code schreiben, als für Ihren speziellen Anwendungsfall erforderlich ist, insbesondere, wenn Sie nach kleinen JavaScript-Verbesserungen suchen.
-
Sowohl auf der Client- als auch auf der Serverseite verwalteter Status kann zu Doppelarbeit führen und die Fehlerfläche vergrößern.
Alternativ hat das Team von Basecamp (dasselbe Team, das Rails geschrieben hat) https://stimulusjs.org [Stimulus.js] erstellt, das sie als „bescheidenes JavaScript-Framework“ bezeichnen für das HTML, das Sie bereits haben. “Stimulus soll eine moderne Rails-Anwendung durch die Arbeit mit serverseitig generiertem HTML verbessern. State lebt in der Document Object Model (DOM), und das Framework bietet Standardmethoden für die Interaktion mit Elementen und Ereignissen im DOM. Es arbeitet Seite an Seite mit Turbolinks (standardmäßig in Rails 5+ enthalten), um die Leistung und Ladezeiten mit Code zu verbessern, der auf einen klar definierten Zweck beschränkt und beschränkt ist.
In diesem Tutorial installieren und verwenden Sie Stimulus, um auf einer vorhandenen Rails-Anwendung aufzubauen, die den Lesern Informationen über Haie bietet. Die Anwendung verfügt bereits über ein Modell für den Umgang mit Hai-Daten. Sie fügen jedoch eine verschachtelte Ressource für Posts zu einzelnen Haien hinzu, mit der Benutzer eine Sammlung von Gedanken und Meinungen zu Haien erstellen können. Dieses Stück läuft ungefähr parallel zu https://www.digitalocean.com/community/tutorials/how-to-create-nested-resources-for-a-ruby-on-rails-applications. So erstellen Sie geschachtelte Ressourcen für einen Ruby on Rails Application], außer dass wir JavaScript verwenden, um die Position und das Erscheinungsbild von Posts auf der Seite zu manipulieren. Wir werden auch einen etwas anderen Ansatz verfolgen, um das Post-Modell selbst aufzubauen.
Voraussetzungen
Um diesem Tutorial zu folgen, benötigen Sie:
-
Ein lokaler Computer oder Entwicklungsserver, auf dem Ubuntu 18.04 ausgeführt wird. Ihr Entwicklungscomputer sollte einen Nicht-Root-Benutzer mit Administratorrechten und eine mit "+ ufw +" konfigurierte Firewall haben. Anweisungen zum Einrichten finden Sie in unserem Initial Server Setup with Ubuntu 18.04 Tutorial.
-
https://nodejs.org [Node.js] und npm, die auf Ihrem lokalen Computer oder Entwicklungsserver installiert sind. In diesem Tutorial werden die Versionen Node.js und npm verwendet. Anleitungen zum Installieren von Node.js und npm unter Ubuntu 18.04 finden Sie im Abschnitt * „Installieren mit PPA“ * unter https://www.digitalocean.com/community/tutorials/how-to-install-node- js-on-ubuntu-18-04 # installation-using-a-ppa [Installieren von Node.js unter Ubuntu 18.04].
-
Ruby, rbenv und Rails, die auf Ihrem lokalen Computer oder Entwicklungsserver installiert sind, führen Sie die Schritte 1 bis 4 unter https://www.digitalocean.com/community/tutorials/ aus. Wie installiere ich Ruby auf Schienen mit rbenv auf Ubuntu? 18-04 [Wie installiere ich Ruby auf Schienen mit rbenv auf Ubuntu? 18.04]. Dieses Tutorial verwendet Ruby, rbenv und Rails.
-
SQLite wurde installiert und eine grundlegende Hai-Informationsanwendung erstellt, die den Anweisungen unter How To Build a Ruby folgt on Rails-Anwendung.
Schritt 1 - Erstellen eines verschachtelten Modells
Unser erster Schritt wird darin bestehen, ein verschachteltes "+ Post " https://guides.rubyonrails.org/active_record_basics.html[model] zu erstellen, das wir mit unserem bestehenden " Shark +" - Modell verknüpfen. Dazu erstellen wir Active Record associations zwischen unseren Modellen: Pfosten gehören bestimmten Haien, und jeder Hai kann mehrere Pfosten haben.
Navigieren Sie zunächst zu dem Verzeichnis + sharkapp +, das Sie für Ihr Rails-Projekt in den folgenden Voraussetzungen erstellt haben:
cd sharkappZum Erstellen unseres "+ Post +" - Modells verwenden wir den Befehl "https://guides.rubyonrails.org/command_line.html#rails-generate[+rails generate +] "mit dem" + model + `- Generator. Geben Sie den folgenden Befehl ein, um das Modell zu erstellen:
rails generate model Post body:text shark:referencesMit "+ body: text " weisen wir Rails an, ein Feld " body " in die Datenbanktabelle " posts " aufzunehmen - die Tabelle, die dem Modell " Post " zugeordnet ist. Wir schließen auch das Schlüsselwort ": references" ein, das eine Zuordnung zwischen den Modellen "+ Shark" und "+ Post " herstellt. Dies stellt insbesondere sicher, dass ein https://en.wikipedia.org/wiki/Foreign_key[foreign key], der jeden Haieintrag in der Datenbank " sharks " darstellt, zur Datenbank " posts +" hinzugefügt wird.
Sobald Sie den Befehl ausgeführt haben, wird in der Ausgabe bestätigt, welche Ressourcen Rails für die Anwendung generiert hat. Bevor Sie fortfahren, können Sie in Ihrer Datenbankmigrationsdatei die Beziehung überprüfen, die jetzt zwischen Ihren Modellen und Datenbanktabellen besteht. Verwenden Sie den folgenden Befehl, um den Inhalt der Datei zu überprüfen, und stellen Sie sicher, dass der Zeitstempel in Ihrer eigenen Migrationsdatei durch den hier gezeigten ersetzt wird:
cat db/migrate/_create_posts.rbSie werden die folgende Ausgabe sehen:
Outputclass CreatePosts < ActiveRecord::Migration[5.2]
def change
create_table :posts do |t|
t.text :body
t.timestamps
end
end
endWie Sie sehen, enthält die Tabelle eine Spalte für einen Haifisch-Fremdschlüssel. Dieser Schlüssel hat die Form "+ _id " - in unserem Fall " _id +".
Rails hat die Beziehung zwischen den Modellen auch an anderer Stelle hergestellt. Sehen Sie sich das neu generierte + Post + Modell mit dem folgenden Befehl an:
cat app/models/post.rbOutputclass Post < ApplicationRecord
belongs_to :shark
endDie Assoziation "+ belong_to +" stellt eine Beziehung zwischen Modellen her, in denen eine einzelne Instanz des deklarierenden Modells zu einer einzelnen Instanz des benannten Modells gehört. Bei unserer Anwendung bedeutet dies, dass ein einzelner Pfosten zu einem einzelnen Hai gehört.
Obwohl Rails in unserem Modell "+ Post " bereits die Assoziation " belong_to " festgelegt hat, müssen wir in unserem Modell " Shark " auch eine Assoziation " has_many +" angeben, damit diese Beziehung ordnungsgemäß funktioniert.
Um die Assoziation "+ has_many " zum Modell " Shark " hinzuzufügen, öffnen Sie " app / models / shark.rb " mit " nano +" oder Ihrem bevorzugten Editor:
nano app/models/shark.rbFügen Sie der Datei die folgende Zeile hinzu, um die Beziehung zwischen Haien und Pfählen herzustellen:
~ / sharkapp / app / models / shark.rb
class Shark < ApplicationRecord
validates :name, presence: true, uniqueness: true
validates :facts, presence: true
endEine Sache, über die man nachdenken sollte, ist, was mit Beiträgen passiert, wenn ein bestimmter Hai gelöscht wird. Wir möchten wahrscheinlich nicht, dass die Posts, die mit einem gelöschten Hai verknüpft sind, in der Datenbank verbleiben. Um sicherzustellen, dass Beiträge, die einem bestimmten Hai zugeordnet sind, gelöscht werden, wenn dieser Hai gelöscht wird, können wir der Zuordnung die Option "+ abhängig +" hinzufügen.
Fügen Sie der Datei den folgenden Code hinzu, um sicherzustellen, dass die Aktion "+ destroy +" für einen bestimmten Hai alle zugehörigen Beiträge löscht:
~ / sharkapp / app / models / shark.rb
class Shark < ApplicationRecord
has_many :posts
validates :name, presence: true, uniqueness: true
validates :facts, presence: true
endWenn Sie diese Änderungen vorgenommen haben, speichern und schließen Sie die Datei. Wenn Sie mit + nano + arbeiten, drücken Sie dazu + STRG + X +, + Y + und dann + ENTER +.
Sie haben jetzt ein Modell für Ihre Posts erstellt. Sie benötigen jedoch auch einen controller, um die Daten in Ihrer Datenbank mit dem HTML-Code abzustimmen, der erstellt und den Benutzern angezeigt wird.
Schritt 2 - Erstellen eines Controllers für eine verschachtelte Ressource
Das Erstellen eines Posts-Controllers umfasst das Festlegen einer verschachtelten Ressourcenroute in der Hauptroutingdatei der Anwendung und das Erstellen der Controller-Datei selbst, um die Methoden anzugeben, die bestimmten Aktionen zugeordnet werden sollen.
Öffnen Sie zunächst Ihre Datei "+ config / routes.rb +", um die Beziehung zwischen Ihren einfallsreichen Routen herzustellen:
nano config/routes.rbDerzeit sieht die Datei folgendermaßen aus:
~ / sharkapp / config / routes.rb
Rails.application.routes.draw do
resources :sharks
root 'sharks#index'
# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
endWir möchten eine dependent relationship Beziehung zwischen Hai und Postressourcen erstellen. Aktualisieren Sie dazu Ihre Routendeklaration so, dass ": sharks +" das übergeordnete Element von ": posts +" ist. Aktualisieren Sie den Code in der Datei so, dass er wie folgt aussieht:
~ / sharkapp / config / routes.rb
Rails.application.routes.draw do
resources :sharks
root 'sharks#index'
# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
endSpeichern und schließen Sie die Datei, wenn Sie mit der Bearbeitung fertig sind.
Erstellen Sie als Nächstes eine neue Datei mit dem Namen "+ app / controller / posts_controller.rb +" für den Controller:
nano app/controllers/posts_controller.rbIn dieser Datei definieren wir die Methoden, mit denen wir einzelne Posts erstellen und löschen. Da es sich jedoch um ein verschachteltes Modell handelt, möchten wir auch eine lokale Instanzvariable "+ @ shark +" erstellen, mit der wir bestimmte Pfosten bestimmten Haien zuordnen können.
Zuerst können wir die Klasse "+ PostsController " selbst zusammen mit zwei " privaten " Methoden erstellen: " get_shark ", mit der wir auf einen bestimmten Hai verweisen können, und " post_params +", mit dem wir auf benutzer- übermittelte Informationen über die params-Methode.
Fügen Sie der Datei den folgenden Code hinzu:
~ / sharkapp / app / controller / posts_controller.rb
class PostsController < ApplicationController
before_action :get_shark
private
def get_shark
@shark = Shark.find(params[:shark_id])
end
def post_params
params.require(:post).permit(:body, :shark_id)
end
endSie haben jetzt Methoden, um die bestimmten Hai-Instanzen abzurufen, mit denen Ihre Posts verknüpft werden. Verwenden Sie dazu die Taste "+: shark_id +" und die Daten, die Benutzer zum Erstellen von Posts eingeben. Beide Objekte sind jetzt für die Methoden verfügbar, die Sie zum Erstellen und Löschen von Posts definieren.
Fügen Sie anschließend über den Methoden "+ private " den folgenden Code zur Datei hinzu, um Ihre Methoden " create " und " destroy +" zu definieren:
~ / sharkapp / app / controller / posts_controller.rb
. . .
def create
@post = @shark.posts.create(post_params)
end
def destroy
@post = @shark.posts.find(params[:id])
@post.destroy
end
. . .Diese Methoden ordnen "+ @ post " -Instanzen bestimmten " @ shark " -Instanzen zu und verwenden die https://api.rubyonrails.org/classes/ActiveRecord/Associations/ClassMethods.html#method-i-has_many[collection methods] Dies wurde uns zur Verfügung gestellt, als wir die Assoziation " has_many " zwischen Haien und Pfählen schufen. Methoden wie " find " und " create +" ermöglichen es uns, gezielt Beiträge zu sammeln, die einem bestimmten Hai zugeordnet sind.
Die fertige Datei sieht folgendermaßen aus:
~ / sharkapp / app / controller / posts_controller.rb
class PostsController < ApplicationController
before_action :get_shark
def create
@post = @shark.posts.create(post_params)
end
def destroy
@post = @shark.posts.find(params[:id])
@post.destroy
end
private
def get_shark
@shark = Shark.find(params[:shark_id])
end
def post_params
params.require(:post).permit(:body, :shark_id)
end
endSpeichern und schließen Sie die Datei, wenn Sie mit der Bearbeitung fertig sind.
Mit Ihrem Controller und Modell können Sie über Ihre Ansichtsvorlagen nachdenken und darüber, wie Sie das generierte HTML Ihrer Anwendung organisieren.
Schritt 3 - Ansichten mit Partials reorganisieren
Sie haben ein "+ Post +" - Modell und einen Controller erstellt. Aus Rails-Sicht müssen Sie also als Letztes über die Ansichten nachdenken, in denen Benutzer Informationen zu Haien eingeben können. Ansichten sind auch der Ort, an dem Sie die Möglichkeit haben, Interaktivität mit Stimulus aufzubauen.
In diesem Schritt zeichnen Sie Ihre Ansichten und Teilansichten auf, die der Ausgangspunkt für Ihre Arbeit mit Stimulus sind.
Die Ansicht, die als Basis für Posts und alle mit Posts verknüpften Partials dient, ist die Ansicht + sharks / show +.
Öffne die Datei:
nano app/views/sharks/show.html.erbDerzeit sieht die Datei folgendermaßen aus:
~ / sharkapp / app / views / sharks / show.html.erb
<p id="notice"><%= notice %></p>
<p>
<strong>Name:</strong>
<%= @shark.name %>
</p>
<p>
<strong>Facts:</strong>
<%= @shark.facts %>
</p>
<%= link_to 'Edit', edit_shark_path(@shark) %> |
<%= link_to 'Back', sharks_path %>Als wir unser "+ Post " - Modell erstellt haben, haben wir beschlossen, keine Ansichten für unsere Posts zu generieren, da wir sie über unsere " sharks / show +" - Ansicht verarbeiten. In dieser Ansicht geht es also zunächst darum, wie wir Benutzereingaben für neue Posts akzeptieren und wie wir dem Benutzer Posts zurückgeben.
Anstatt alle unsere Funktionen in diese Ansicht einzubeziehen, verwenden wir teilweise wiederverwendbare Vorlagen, die eine bestimmte Funktion erfüllen. Wir erstellen einen Teil für neue Beiträge und einen anderen, um zu steuern, wie Beiträge dem Benutzer angezeigt werden. Währenddessen werden wir uns überlegen, wie und wo wir Stimulus verwenden können, um das Erscheinungsbild von Posts auf der Seite zu manipulieren, da unser Ziel darin besteht, die Präsentation von Posts mit JavaScript zu steuern.
Fügen Sie zunächst unter den Haifakten einen "+ <h2> " - Header für Posts und eine Zeile hinzu, um einen Teil mit dem Namen " sharks / posts +" zu rendern:
~ / sharkapp / app / views / sharks / show.html.erb
. . .
<p>
<strong>Facts:</strong>
<%= @shark.facts %>
</p>
. . .Dadurch wird der Teil mit dem Form Builder für neue Post-Objekte gerendert.
Als nächstes fügen wir unter den Links "+ Bearbeiten " und " Zurück " einen Abschnitt hinzu, um die Darstellung älterer Beiträge auf der Seite zu steuern. Fügen Sie der Datei die folgenden Zeilen hinzu, um einen Teil mit dem Namen " sharks / all +" zu rendern:
~ / sharkapp / app / views / sharks / show.html.erb
<%= link_to 'Edit', edit_shark_path(@shark) %> |
<%= link_to 'Back', sharks_path %>Das + <div> + Element wird nützlich sein, wenn wir mit der Integration von Stimulus in diese Datei beginnen.
Speichern und schließen Sie die Datei, sobald Sie diese Änderungen vorgenommen haben. Mit den Änderungen, die Sie auf der Rails-Seite vorgenommen haben, können Sie nun mit der Installation und Integration von Stimulus in Ihre Anwendung fortfahren.
Schritt 4 - Installieren von Stimulus
Der erste Schritt bei der Verwendung von Stimulus ist die Installation und Konfiguration Ihrer Anwendung für die Verwendung mit Stimulus. Dazu gehört, dass wir sicherstellen, dass wir die richtigen Abhängigkeiten haben, einschließlich des https://yarnpkg.com [Yarn] -Paketmanagers und Webpacker, dem Juwel, mit dem wir arbeiten können der JavaScript Pre-Prozessor und Bundler webpack. Mit diesen Abhängigkeiten können wir Stimulus installieren und JavaScript verwenden, um Ereignisse und Elemente im DOM zu bearbeiten.
Beginnen wir mit der Installation von Yarn. Aktualisieren Sie zunächst Ihre Paketliste:
sudo apt updateFügen Sie als nächstes den GPG-Schlüssel für das Debian Yarn-Repository hinzu:
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -Fügen Sie das Repository zu Ihren APT-Quellen hinzu:
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.listAktualisieren Sie die Paketdatenbank mit den neu hinzugefügten Yarn-Paketen:
sudo apt updateUnd zum Schluss installieren Sie Yarn:
sudo apt install yarnWenn "+ Wolle " installiert ist, können Sie Ihrem Projekt das Juwel " Webpacker +" hinzufügen.
Öffnen Sie die Gem-Datei Ihres Projekts, in der die Gem-Abhängigkeiten für Ihr Projekt aufgeführt sind:
nano GemfileIn der Datei werden Turbolinks standardmäßig aktiviert:
~ / sharkapp / Gemfile
. . .
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
. . .Turbolinks wurde entwickelt, um die Leistung durch Optimierung der Seitenauslastung zu verbessern: Anstatt dass Linkklicks zu einer neuen Seite navigieren, fängt Turbolinks diese Klickereignisse ab und leitet die Seitenanforderung über https://en.wikipedia.org/wiki/Ajax_ (programming) [ Asynchrones JavaScript und HTML (AJAX)]. Anschließend wird der Hauptteil der aktuellen Seite ersetzt und der Inhalt der Abschnitte + <head> + zusammengeführt, während die Objekte JavaScript + window + und + document + und das Element + <html> + zwischen den Darstellungen bestehen bleiben . Dies behebt eine der Hauptursachen für langsame Ladezeiten von Seiten: das Neuladen von CSS- und JavaScript-Ressourcen.
Wir erhalten standardmäßig Turbolinks in unserer Gem-Datei, aber wir müssen den "+ webpacker " Gem hinzufügen, damit wir Stimulus installieren und verwenden können. Fügen Sie unter dem Juwel " turbolinks " " webpacker +" hinzu:
~ / sharkapp / Gemfile
. . .
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
. . .Speichern und schließen Sie die Datei, wenn Sie fertig sind.
Fügen Sie als Nächstes den Edelstein mit dem Befehl "+ bundle +" zum Bundle Ihres Projekts hinzu:
bundleDadurch wird eine neue Datei "+ Gemfile.lock +" erstellt - die endgültige Aufzeichnung der Edelsteine und Versionen für Ihr Projekt.
Installieren Sie als Nächstes den Edelstein im Kontext Ihres Bundles mit dem folgenden Befehl + bundle exec +:
bundle exec rails webpacker:installSobald die Installation abgeschlossen ist, müssen wir eine kleine Anpassung an der Inhaltssicherheitsdatei unserer Anwendung vornehmen. Dies liegt an der Tatsache, dass wir mit Rails 5.2+ arbeiten, einer Content Security Policy (CSP) eingeschränkten Umgebung Die einzigen in der Anwendung zulässigen Skripts müssen aus vertrauenswürdigen Quellen stammen.
Öffnen Sie "+ config / initializers / content_security_policy.rb +", die Standarddatei, die Rails zur Definition anwendungsweiter Sicherheitsrichtlinien bereitstellt:
nano config/initializers/content_security_policy.rbFügen Sie die folgenden Zeilen am Ende der Datei hinzu, um "+ webpack-dev-server" - den Server, der das Webpack-Bundle Ihrer Anwendung bereitstellt - als zulässigen Ursprung zuzulassen:
~ / sharkapp / config / initializers / content_security_policy.rb
. . .
Rails.application.config.content_security_policy do |policy|
policy.connect_src :self, :https, 'http://localhost:3035', 'ws://localhost:3035' if Rails.env.development?
endDadurch wird sichergestellt, dass der Webpacker-Dev-Server als vertrauenswürdige Asset-Quelle erkannt wird.
Speichern und schließen Sie die Datei, wenn Sie mit der Änderung fertig sind.
Durch die Installation von "+ webpacker " haben Sie zwei neue Verzeichnisse im " app " - Verzeichnis Ihres Projekts erstellt, dem Verzeichnis, in dem sich Ihr Hauptanwendungscode befindet. Im neuen übergeordneten Verzeichnis " app / javascript" wird der JavaScript-Code Ihres Projekts gespeichert und weist die folgende Struktur auf:
Output├── javascript
│ ├── controllers
│ │ ├── hello_controller.js
│ │ └── index.js
│ └── packs
│ └── application.jsDas Verzeichnis "+ app / javascript " enthält zwei untergeordnete Verzeichnisse: " app / javascript / packs ", das Ihre Webpack-Einstiegspunkte enthält, und " app / javascript / controller ", in dem Sie Ihren Stimulus definieren. Https: / /stimulusjs.org/reference/controllers[controllers]. Der Befehl ` bundle exec `, den wir gerade verwendet haben, erstellt das Verzeichnis ` app / javascript / packs `, aber wir müssen Stimulus installieren, damit das Verzeichnis ` app / javascript / controller +` automatisch generiert wird.
Wenn "+ webpacker +" installiert ist, können wir Stimulus jetzt mit dem folgenden Befehl installieren:
bundle exec rails webpacker:install:stimulusSie sehen eine Ausgabe wie die folgende, die angibt, dass die Installation erfolgreich war:
Output. . .
success Saved lockfile.
success Saved 5 new dependencies.
info Direct dependencies
└─ [email protected]
info All dependencies
├─ @stimulus/[email protected]
├─ @stimulus/[email protected]
├─ @stimulus/[email protected]
├─ @stimulus/[email protected]
└─ [email protected]
Done in 8.30s.
Webpacker now supports Stimulus.js 🎉Wir haben jetzt Stimulus installiert und die Hauptverzeichnisse, die wir benötigen, um damit zu arbeiten. Bevor Sie mit dem Schreiben von Code fortfahren, müssen Sie einige Anpassungen auf Anwendungsebene vornehmen, um den Installationsvorgang abzuschließen.
Zuerst müssen wir eine Anpassung an "+ app / views / layouts / application.html.erb " vornehmen, um sicherzustellen, dass unser JavaScript-Code verfügbar ist und dass der Code in unserem Haupt-Einstiegspunkt " webpacker +" definiert ist app / javascript / packs / application.js + `wird jedes Mal ausgeführt, wenn eine Seite geladen wird.
Öffnen Sie diese Datei:
nano app/views/layouts/application.html.erbÄndern Sie das folgende "+ javascript_include_tag " -Tag in " javascript__tag ", um " app / javascript / packs / application.js +" zu laden:
~ / sharkapp / app / views / layouts / application.html.erb
. . .
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript__tag 'application', 'data-turbolinks-track': 'reload' %>
. . .Speichern und schließen Sie die Datei, wenn Sie diese Änderung vorgenommen haben.
Öffnen Sie als nächstes + app / javascript / packs / application.js +:
nano app/javascript/packs/application.jsDie Datei sieht zunächst so aus:
~ / sharkapp / app / javascript / packs / application.js
. . .
console.log('Hello World from Webpacker')
import "controllers"Löschen Sie den Code für das Boilerplate und fügen Sie den folgenden Code hinzu, um Ihre Stimulus-Controller-Dateien zu laden und die Anwendungsinstanz zu starten:
~ / sharkapp / app / javascript / packs / application.js
. . .
import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"
const application = Application.start()
const context = require.context("../controllers", true, /\.js$/)
application.load(definitionsFromContext(context))In diesem Code werden Webpack-Hilfsmethoden verwendet, um die Controller im Verzeichnis "+ app / javascript / controller +" zu fordern und diesen Kontext für die Verwendung in Ihrer Anwendung zu laden.
Speichern und schließen Sie die Datei, wenn Sie mit der Bearbeitung fertig sind.
Sie haben jetzt Stimulus installiert und können es in Ihrer Anwendung verwenden. Als nächstes bauen wir die Teilausschnitte, auf die wir in unseren Haien + show + view - + sharks / posts + und + sharks / all + - referenziert haben, mit Stimulus controllers, targets und actions aus.
Schritt 5 - Verwenden von Stimulus in Rails Partials
Unser Teil "+ sharks / posts " verwendet https://api.rubyonrails.org/v5.2.3/classes/ActionView/Helpers/FormHelper.html [` form_with +` form helper], um ein neues Beitragsobjekt zu erstellen. Es werden auch die drei Kernkonzepte von Stimulus verwendet: Controller, Ziele und Aktionen. Diese Konzepte funktionieren wie folgt:
-
Controller sind JavaScript-Klassen, die in JavaScript-Modulen definiert und als Standardobjekt des Moduls exportiert werden. Über Controller haben Sie Zugriff auf bestimmte HTML-Elemente und die Stimulus-Anwendungsinstanz, die in "+ app / javascript / packs / application.js +" definiert ist.
-
Mithilfe von Zielen können Sie bestimmte HTML-Elemente nach Namen referenzieren und bestimmten Controllern zuordnen.
-
Aktionen steuern, wie DOM-Ereignisse von Controllern verarbeitet werden, und sind auch bestimmten Controllern zugeordnet. Sie stellen eine Verbindung zwischen dem dem Controller zugeordneten HTML-Element, den im Controller definierten Methoden und einem DOM-Ereignis-Listener her.
In unserem Teil werden wir zuerst ein Formular erstellen, wie wir es normalerweise mit Rails tun würden. Anschließend fügen wir dem Formular einen Stimulus-Controller, eine Aktion und Ziele hinzu, um mithilfe von JavaScript zu steuern, wie neue Beiträge zur Seite hinzugefügt werden.
Erstellen Sie zunächst eine neue Datei für den Teil:
nano app/views/sharks/_posts.html.erbFügen Sie in der Datei den folgenden Code hinzu, um ein neues Post-Objekt mit dem Hilfsmittel + form_with + zu erstellen:
~ / sharkapp / app / views / sharks / _posts.html.erb
<%= form_with model: [@shark, @shark.posts.build] do |form| %>
<%= form.text_area :body, placeholder: "Your post here" %>
<br>
<%= form.submit %>
<% end %>Bisher verhält sich dieses Formular wie ein typisches Rails-Formular, bei dem mit dem Hilfsmittel "+ form_with " ein Post-Objekt mit den für das Modell " Post " definierten Feldern erstellt wird. Das Formular enthält daher ein Feld für den Beitrag ": body ", zu dem wir einen " placeholder +" mit der Aufforderung zum Ausfüllen eines Beitrags hinzugefügt haben.
Darüber hinaus ist das Formular darauf ausgelegt, die Erfassungsmethoden zu nutzen, die mit den Assoziationen zwischen den Modellen "+ Shark " und " Post +" verbunden sind. In diesem Fall gehört das neue Beitragsobjekt, das aus von Benutzern übermittelten Daten erstellt wurde, zu der Sammlung von Beiträgen, die dem aktuell angezeigten Hai zugeordnet sind.
Unser Ziel ist es nun, einige Stimulus-Controller, Ereignisse und Aktionen hinzuzufügen, um zu steuern, wie die Post-Daten auf der Seite angezeigt werden. Der Benutzer wird letztendlich Post-Daten übermitteln und diese dank einer Stimulus-Aktion auf der Seite anzeigen.
Zunächst fügen wir dem Formular "+" in einem " <div> +" - Element einen Controller hinzu:
~ / sharkapp / app / views / sharks / _posts.html.erb
<%= form_with model: [@shark, @shark.posts.build] do |form| %>
<%= form.text_area :body, placeholder: "Your post here" %>
<br>
<%= form.submit %>
<% end %>-
Stellen Sie sicher, dass Sie das schließende
+ <div> +Tag * hinzufügen, um den Bereich des Controllers korrekt zu bestimmen.
Als Nächstes hängen wir eine Aktion an das Formular an, die vom Formularübermittlungsereignis ausgelöst wird. Diese Aktion steuert, wie Benutzereingaben auf der Seite angezeigt werden. Es wird auf eine "+ addPost +" - Methode verwiesen, die wir in den Beiträgen des Stimulus-Controllers definieren werden:
~ / sharkapp / app / views / sharks / _posts.html.erb
<div data-controller="posts">
<%= form_with model: [@shark, @shark.posts.build] do |form| %>
. . .
<%= form.submit %>
<% end %>
</div>Wir verwenden die Option ": data" mit " form_with", um die Stimulus-Aktion als zusätzliches HTML-Datenattribut zu übergeben. Die Aktion selbst hat einen Wert, der als action descriptor bezeichnet wird und sich aus folgenden Elementen zusammensetzt:
-
* Das DOM-Ereignis, auf das gewartet werden soll *. In diesem Fall wird das Standardereignis verwendet, das mit Formularelementen verknüpft ist, also müssen wir das Ereignis nicht im Deskriptor selbst angeben. Weitere Informationen zu allgemeinen Element / Ereignis-Paaren finden Sie in der Stimulus documentation.
-
* Die Controller-ID *, in unserem Fall "+ posts +".
-
* Die Methode, die das Ereignis aufrufen soll *. In unserem Fall ist dies die Methode "+ addBody +", die wir im Controller definieren.
Als nächstes hängen wir ein Datenziel an die Benutzereingabe an, die im +: body + + <textarea> + -Element definiert ist, da wir diesen eingegebenen Wert in der + addBody + -Methode verwenden.
Fügen Sie dem Element +: body + + <textarea> + die folgende Option +: data hinzu:
~ / sharkapp / app / views / sharks / _posts.html.erb
<div data-controller="posts">
<%= form_with model: [@shark, @shark.posts.build], data: { action: "posts#addBody" } do |form| %>
<%= form.text_area :body, placeholder: "Your post here" %>
. . .Ähnlich wie Aktionsdeskriptoren haben Stimulus-Ziele Zieldeskriptoren, die die Controller-ID und den Zielnamen enthalten. In diesem Fall ist "+ posts " unser Controller und " body +" selbst das Ziel.
Als letzten Schritt fügen wir ein Datenziel für die eingegebenen "+ body +" - Werte hinzu, damit Benutzer ihre Beiträge sehen können, sobald sie übermittelt werden.
Fügen Sie das folgende + <ul> + Element mit einem + add + Ziel unter dem Formular und über dem schließenden + <div> + hinzu:
~ / sharkapp / app / views / sharks / _posts.html.erb
. . .
<% end %>
</div>Wie beim "+ body " - Ziel enthält unser Zieldeskriptor sowohl den Namen des Controllers als auch des Ziels - in diesem Fall " add +".
Der fertige Teil sieht dann so aus:
~ / sharkapp / app / views / sharks / _posts.html.erb
<div data-controller="posts">
<%= form_with model: [@shark, @shark.posts.build], data: { action: "posts#addBody"} do |form| %>
<%= form.text_area :body, placeholder: "Your post here", data: { target: "posts.body" } %>
<br>
<%= form.submit %>
<% end %>
<ul data-target="posts.add">
</ul>
</div>Sobald Sie diese Änderungen vorgenommen haben, können Sie die Datei speichern und schließen.
Sie haben jetzt einen der beiden Teileffekte erstellt, die Sie der Ansichtsvorlage "+ sharks / show s" hinzugefügt haben. Als nächstes erstellen Sie das zweite, "+ sharks / all +", das alle älteren Beiträge aus der Datenbank anzeigt.
Erstellen Sie eine neue Datei mit dem Namen "+ _all.html.erb " im Verzeichnis " app / views / sharks / +":
nano app/views/sharks/_all.html.erbFügen Sie der Datei den folgenden Code hinzu, um die Sammlung der Beiträge zu durchsuchen, die dem ausgewählten Hai zugeordnet sind:
~ / sharkapp / app / views / sharks / _all.html.erb
<% for post in @shark.posts %>
<ul>
<li class="post">
<%= post.body %>
</li>
</ul>
<% end %>Dieser Code verwendet eine for-Schleife, um die einzelnen Post-Instanzen in der Auflistung der Post-Objekte zu durchlaufen, die einem bestimmten Hai zugeordnet sind.
Wir können diesem Teil nun einige Stimulus-Aktionen hinzufügen, um das Erscheinungsbild von Posts auf der Seite zu steuern. Insbesondere werden wir Aktionen hinzufügen, die die Aufwärtsbewertungen steuern und festlegen, ob Beiträge auf der Seite sichtbar sind oder nicht
Zuvor müssen wir jedoch unserem Projekt einen Edelstein hinzufügen, damit wir mit Font Awesome -Symbolen arbeiten können, mit denen wir Upvotes registrieren. Öffnen Sie ein zweites Terminalfenster und navigieren Sie zu Ihrem + sharkapp + Projektverzeichnis.
Öffne dein Gemfile:
nano GemfileFügen Sie unter Ihrem Webpacker die folgende Zeile hinzu, um die https://github.com/bokmann/font-awesome-rails [+ font-awesome-rails + gem] in das Projekt aufzunehmen:
~ / sharkapp / Gemfile
. . .
gem 'webpacker', '~> 4.x'
. . .Speichern und schließen Sie die Datei.
Als nächstes installieren Sie den Edelstein:
bundle installÖffnen Sie schließlich das Haupt-Stylesheet Ihrer Anwendung, "+ app / assets / stylesheets / application.css":
nano app/assets/stylesheets/application.cssFügen Sie die folgende Zeile hinzu, um die Stile von Font Awesome in Ihr Projekt aufzunehmen:
~ / sharkapp / app / assets / stylesheets / application.css
. . .
*
*= require_tree .
*= require_self
*/Speichern und schließen Sie die Datei. Sie können jetzt Ihr zweites Terminalfenster schließen.
Zurück in Ihrem + app / views / sharks / _all.html.erb + Teil können Sie jetzt zwei https://api.rubyonrails.org/v5.2.3/classes/ActionView/Helpers/FormTagHelper.html#method- hinzufügen. i-button_tag [+ button_tags +] mit zugehörigen Stimulusaktionen, die bei Klickereignissen ausgelöst werden. Eine Schaltfläche gibt Benutzern die Möglichkeit, einen Beitrag zu verbessern, und die andere gibt ihnen die Möglichkeit, ihn aus der Seitenansicht zu entfernen.
Fügen Sie den folgenden Code zu "+ app / views / sharks / _all.html.erb +" hinzu:
~ / sharkapp / app / views / sharks / _all.html.erb
<% for post in @shark.posts %>
<ul>
<li class="post">
<%= post.body %>
</li>
</ul>
<% end %>Bei Button-Tags ist auch die Option ": data +" verfügbar. Daher haben wir unseren Posts-Stimulus-Controller und zwei Aktionen hinzugefügt: " remove " und " upvote ". Auch hier müssen wir in den Aktionsdeskriptoren nur unseren Controller und unsere Methode definieren, da das Standardereignis für Schaltflächenelemente "Klicken" ist. Durch Klicken auf jede dieser Schaltflächen werden die in unserem Controller definierten Methoden " remove " und " upvote +" ausgelöst.
Speichern und schließen Sie die Datei, wenn Sie mit der Bearbeitung fertig sind.
Die letzte Änderung, die wir vornehmen werden, bevor wir mit der Definition unseres Controllers fortfahren, besteht darin, ein Datenziel und eine Aktion festzulegen, um zu steuern, wie und wann der Teil "+ Haie / Alle +" angezeigt wird.
Öffnen Sie die Vorlage "+ show " erneut, wobei der erste Aufruf zum Rendern von " sharks / all +" derzeit definiert ist:
nano app/views/sharks/show.html.erbAm Ende der Datei befindet sich ein "+ <div> +" - Element, das derzeit so aussieht:
~ / sharkapp / app / views / sharks / show.html.erb
. . .
<div>
<%= render 'sharks/all' %>
</div>Fügen Sie diesem + <div> + - Element zunächst einen Controller hinzu, um Aktionen und Ziele festzulegen:
~ / sharkapp / app / views / sharks / show.html.erb
. . .
<div >
<%= render 'sharks/all' %>
</div>Fügen Sie als Nächstes eine Schaltfläche hinzu, um das Erscheinungsbild des Teils auf der Seite zu steuern. Diese Schaltfläche löst eine "+ showAll +" - Methode in unserem Post-Controller aus.
Fügen Sie die Schaltfläche unter dem Element "+ <div> " und über der Anweisung " render +" hinzu:
~ / sharkapp / app / views / sharks / show.html.erb
. . .
<div data-controller="posts">
<%= render 'sharks/all' %>Auch hier müssen wir nur unseren Controller "+ posts " und " showAll +" identifizieren - die Aktion wird durch ein Klickereignis ausgelöst.
Als nächstes werden wir ein Datenziel hinzufügen. Das Ziel dieses Ziels ist es, das Erscheinungsbild des Teils auf der Seite zu steuern. Letztendlich möchten wir, dass Benutzer ältere Beiträge nur dann sehen, wenn sie sich dazu entschieden haben, indem sie auf die Schaltfläche "+ Ältere Beiträge anzeigen +" klicken.
Wir werden daher ein Datenziel mit dem Namen "+ show " an das " sharks / all " -Partial anhängen und seinen Standardstil auf "https://developer.mozilla.org/en-US/docs/Web/CSS/visibility" setzen. ` Sichtbarkeit: versteckt +`]. Dadurch wird der Teil ausgeblendet, es sei denn, Benutzer möchten ihn sehen, indem sie auf die Schaltfläche klicken.
Fügen Sie das folgende + <div> + Element mit der Definition + show + target und + style + unter der Schaltfläche und über der partiellen Rendering-Anweisung hinzu:
~ / sharkapp / app / views / sharks / show.html.erb
. . .
<div data-controller="posts">
<button data-action="posts#showAll">Show Older Posts</button>
<%= render 'sharks/all' %>-
Achten Sie darauf, das schließende
+ </ div> +Tag hinzuzufügen. *
Das fertige "+ show +" Template sieht dann so aus:
~ / sharkapp / app / views / sharks / show.html.erb
<p id="notice"><%= notice %></p>
<p>
<strong>Name:</strong>
<%= @shark.name %>
</p>
<p>
<strong>Facts:</strong>
<%= @shark.facts %>
</p>
<h2>Posts</h2>
<%= render 'sharks/posts' %>
<%= link_to 'Edit', edit_shark_path(@shark) %> |
<%= link_to 'Back', sharks_path %>
<div data-controller="posts">
<button data-action="posts#showAll">Show Older Posts</button>
<div data-target="posts.show" style="visibility:hidden">
<%= render 'sharks/all' %>
</div>
</div>Speichern und schließen Sie die Datei, wenn Sie mit der Bearbeitung fertig sind.
Wenn diese Vorlage und die dazugehörigen Partials fertig sind, können Sie den Controller mit den Methoden erstellen, auf die Sie in diesen Dateien verwiesen haben.
Schritt 6 - Erstellen des Stimulus-Controllers
Bei der Installation von Stimulus wurde das Verzeichnis "+ app / javascript / controller +" erstellt, aus dem das Webpack unseren Anwendungskontext lädt, sodass wir unseren Posts-Controller in diesem Verzeichnis erstellen. Dieser Controller enthält alle Methoden, auf die wir im vorherigen Schritt verwiesen haben:
-
+ addBody () +, um neue Beiträge hinzuzufügen. -
+ showAll () +, um ältere Beiträge anzuzeigen. -
+ remove () +, um Beiträge aus der aktuellen Ansicht zu entfernen. -
+ upvote () +, um ein Upvote-Symbol an Beiträge anzuhängen.
Erstellen Sie eine Datei mit dem Namen "+ posts controller.js" im Verzeichnis "+ app / javascript / controller or":
nano app/javascript/controllers/posts_controller.jsErweitern Sie zunächst oben in der Datei die in Stimulus integrierte Klasse "+ Controller":
~ / sharkapp / app / javascript / controller / posts_controller.js
import { Controller } from "stimulus"
export default class extends Controller {
}Fügen Sie als Nächstes die folgenden Zieldefinitionen zur Datei hinzu:
~ / sharkapp / app / javascript / controller / posts_controller.js
. . .
export default class extends Controller {
}Wenn Sie Ziele auf diese Weise definieren, können Sie in unseren Methoden mit der Eigenschaft "+ this.Target " auf sie zugreifen. Dadurch erhalten Sie das erste übereinstimmende Zielelement. Um zum Beispiel das in unserem Zielarray definierte " body " - Datenziel abzugleichen, würden wir " this.Target +" verwenden. Diese Eigenschaft ermöglicht es uns, Dinge wie Eingabewerte oder CSS-Stile zu manipulieren.
Als nächstes können wir die Methode "+ addBody +" definieren, mit der das Erscheinungsbild neuer Beiträge auf der Seite gesteuert wird. Fügen Sie den folgenden Code unterhalb der Zieldefinitionen hinzu, um diese Methode zu definieren:
~ / sharkapp / app / javascript / controller / posts_controller.js
. . .
export default class extends Controller {
static targets = [ "body", "add", "show"]
}Diese Methode definiert eine "+ content " - Variable mit der https://www.digitalocean.com/community/tutorials/understanding-variables-scope-hoisting-in-javascript#difference-between-var,-let,-and-const [` let ` keyword] und setzt es gleich dem Beitrags-Eingabe-String, den Benutzer in das Beitrags-Formular eingegeben haben. Dies geschieht aufgrund des Datenziels " body ", das wir in unserem Formular an das Element " <textarea> " angehängt haben. Wenn Sie " this.bodyTarget " verwenden, um dieses Element zu finden, können Sie die https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement [` value ` property] verwenden, die diesem Element zugeordnet ist Element, um den Wert von " content +" festzulegen, den die Benutzer nach der Eingabe eingegeben haben.
Als nächstes fügt die Methode diese Nachtrageingabe dem "+ add " - Ziel hinzu, das wir dem " <ul> " - Element unterhalb des Formularerstellers im " sharks / posts " -Teil hinzugefügt haben. Hierzu wird die https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML [` Element.insertAdjacentHTML () ` - Methode] verwendet, mit der der Inhalt des neuen Posts eingefügt wird , setzen Sie in der Variable " content " vor das Zielelement " add ". Wir haben den neuen Beitrag auch in ein " <li> +" - Element eingeschlossen, sodass neue Beiträge als Listenelemente mit Aufzählungszeichen angezeigt werden.
Als nächstes können wir unterhalb der Methode + addBody + die Methode + showAll + hinzufügen, mit der das Erscheinungsbild älterer Beiträge auf der Seite gesteuert wird:
~ / sharkapp / app / javascript / controller / posts_controller.js
. . .
export default class extends Controller {
. . .
addBody() {
let content = this.bodyTarget.value;
this.addTarget.insertAdjacentHTML('beforebegin', "<li>" + content + "</li>");
}
}Hier verwenden wir wieder die Eigenschaft "+ this.Target ", um unser " show " -Ziel abzugleichen, das an das " <div> " - Element mit dem " sharks / all " -Teil angehängt ist. Wir haben ihm den Standardstil "" Sichtbarkeit: versteckt "" gegeben. In dieser Methode ändern wir den Stil einfach in "" sichtbar "+". Dies zeigt den Teil für Benutzer an, die sich dafür entschieden haben, ältere Beiträge zu sehen.
Unter "+ showAll " wird als nächstes eine " upvote " - Methode hinzugefügt, mit der Benutzer Beiträge auf der Seite "upvoten" können, indem sie die https://fontawesome.com/icons?d=gallery&m=free[free] anhängen. Font Awesome " Häkchen-Kreis +" -Symbol für einen bestimmten Beitrag.
Fügen Sie den folgenden Code hinzu, um diese Methode zu definieren:
~ / sharkapp / app / javascript / controller / posts_controller.js
. . .
export default class extends Controller {
. . .
showAll() {
this.showTarget.style.visibility = "visible";
}
}Hier erstellen wir eine + post + Variable, die auf das nächste + <li> + Element mit der Klasse + post + abzielt - die Klasse, die wir an jedes + <li> + Element in unserer Schleife angehängt haben Iteration in + sharks / all +. Dies zielt auf den nächsten Beitrag ab und fügt das Symbol "+ Häkchen-Kreis" direkt innerhalb des Elements "+ <li> +" nach seinem letzten untergeordneten Element hinzu.
Als Nächstes verwenden wir eine ähnliche Methode, um Beiträge auf der Seite auszublenden. Fügen Sie den folgenden Code unter der Methode "+ upvote " hinzu, um eine Methode " remove +" zu definieren:
~ / sharkapp / app / javascript / controller / posts_controller.js
. . .
export default class extends Controller {
. . .
upvote() {
let post = event.target.closest(".post");
post.insertAdjacentHTML('beforeend', '<i class="fa fa-check-circle"></i>');
}
}Auch hier wird unsere Variable "+ post" auf das nächste "+ <li> " -Element mit der Klasse " post" abzielen. Anschließend wird die Visibility-Eigenschaft auf "" hidden "" gesetzt, um den Beitrag auf der Seite auszublenden.
Die fertige Controller-Datei sieht nun folgendermaßen aus:
~ / sharkapp / app / javascript / controller / posts_controller.js
import { Controller } from "stimulus"
export default class extends Controller {
static targets = ["body", "add", "show"]
addBody() {
let content = this.bodyTarget.value;
this.addTarget.insertAdjacentHTML('beforebegin', "<li>" + content + "</li>");
}
showAll() {
this.showTarget.style.visibility = "visible";
}
upvote() {
let post = event.target.closest(".post");
post.insertAdjacentHTML('beforeend', '<i class="fa fa-check-circle"></i>');
}
remove() {
let post = event.target.closest(".post");
post.style.visibility = "hidden";
}
}Speichern und schließen Sie die Datei, wenn Sie mit der Bearbeitung fertig sind.
Wenn Sie Ihren Stimulus-Controller installiert haben, können Sie einige endgültige Änderungen an der Ansicht "+ Index +" vornehmen und Ihre Anwendung testen.
Schritt 7 - Ändern der Indexansicht und Testen der Anwendung
Mit einer letzten Änderung an der "+ index " - Ansicht der Haie können Sie Ihre Anwendung testen. Die Ansicht " Index +" ist das Stammverzeichnis der Anwendung, die Sie unter https://www.digitalocean.com/community/tutorials/how-to-build-a-ruby-on-rails-application#step-4 festgelegt haben -% E2% 80% 94-Erstellen-der-Anwendungs-Root-Ansicht-und-Test-Funktionalität [Schritt 4] von https://www.digitalocean.com/community/tutorials/how-to-build-a- Ruby-on-Rails-Anwendung [So erstellen Sie eine Ruby-on-Rails-Anwendung].
Öffne die Datei:
nano app/views/sharks/index.html.erbAnstelle der "+ link_to " - Helfer, die automatisch generiert wurden, um Haie anzuzeigen und zu vernichten, verwenden wir " button_to " - Helfer. Auf diese Weise können wir mit generiertem HTML-Code anstelle der standardmäßigen Rails-JavaScript-Elemente arbeiten, die wir in Schritt 1 nicht mehr verwendet haben, als wir " javascript_include_tag " in " javascript_pack_tag " in " app / views / layouts /" geändert haben. application.html.erb + `.
Ersetzen Sie die vorhandenen "+ link_to " - Helfer in der Datei durch die folgenden " button_to +" - Helfer:
~ / sharkapp / app / views / sharks / index.html.erb
. . .
<tbody>
<% @sharks.each do |shark| %>
<tr>
<td><%= shark.name %></td>
<td><%= shark.facts %></td>
<td></td>
<td></td>
<td></td>
</tr>
<% end %>
</tbody>
. . .Diese Hilfsprogramme führen fast die gleichen Aufgaben aus wie die Hilfsprogramme "+ link_to ", aber der Hilfsprogramm " Destroy +" verwendet jetzt generiertes HTML und nicht mehr das Standard-JavaScript von Rails.
Speichern und schließen Sie die Datei, wenn Sie mit der Bearbeitung fertig sind.
Jetzt können Sie Ihre Anwendung testen.
Führen Sie zuerst Ihre Datenbankmigrationen aus:
rails db:migrateStarten Sie als nächstes Ihren Server. Wenn Sie lokal arbeiten, können Sie dies mit dem folgenden Befehl tun:
rails sWenn Sie auf einem Entwicklungsserver arbeiten, können Sie die Anwendung starten mit:
rails s --binding=Navigieren Sie in Ihrem Browser zur Zielseite der Anwendung. Wenn Sie lokal arbeiten, ist dies "+ localhost: 3000 " oder " http: //: 3000 +", wenn Sie auf einem Server arbeiten.
Sie sehen die folgende Zielseite:
image: https://assets.digitalocean.com/articles/stimulus/stimulus_landing.png [Landing Page der Anwendung]
Wenn Sie auf * Show * klicken, gelangen Sie zur Ansicht + show + für diesen Hai. Hier sehen Sie ein Formular zum Ausfüllen eines Beitrags:
image: https: //assets.digitalocean.com/articles/stimulus/stimulus_empty_post.png [Shark Show Page]
Geben Sie im Post-Formular "Diese Haie sind gruselig!" Ein:
image: https: //assets.digitalocean.com/articles/stimulus/stimulus_fill_post.png
Klicken Sie auf * Beitrag erstellen *. Sie sehen jetzt den neuen Beitrag auf der Seite:
image: https: //assets.digitalocean.com/articles/stimulus/stimulus_show_post.png%20.png [Neuer Beitrag zur Seite hinzugefügt]
Sie können einen weiteren neuen Beitrag hinzufügen, wenn Sie möchten. Geben Sie diesmal "Diese Haie werden in Filmen oft falsch dargestellt" ein und klicken Sie auf "Beitrag erstellen":
image: https://assets.digitalocean.com/articles/stimulus/stimulus_two_posts.png [Zweiter Beitrag zur Seite hinzugefügt]
Um die Funktionalität der Funktion "Ältere Beiträge anzeigen" zu testen, müssen wir diese Seite verlassen, da unser Great White derzeit keine Beiträge enthält, die älter sind als die, die wir gerade hinzugefügt haben.
Klicken Sie auf * Zurück *, um zur Hauptseite zu gelangen, und dann auf * Anzeigen *, um zur Zielseite von Great White zurückzukehren:
image: https: //assets.digitalocean.com/articles/stimulus/stimulus_empty_post.png [Shark Show Page]
Wenn Sie auf * Ältere Beiträge anzeigen * klicken, werden Ihnen jetzt die von Ihnen erstellten Beiträge angezeigt:
image: https: //assets.digitalocean.com/articles/stimulus/stimulus_show_older.png [Ältere Beiträge anzeigen]
Sie können jetzt einen Beitrag verbessern, indem Sie auf die Schaltfläche * Beitrag verbessern * klicken:
image: https://assets.digitalocean.com/articles/stimulus/stimulus_upvote.png [Einen Beitrag verbessern]
In ähnlicher Weise wird der Beitrag durch Klicken auf * Beitrag entfernen * ausgeblendet:
image: https://assets.digitalocean.com/articles/stimulus/stimulus_remove.png [Einen Beitrag entfernen]
Sie haben nun bestätigt, dass Sie über eine funktionsfähige Rails-Anwendung verfügen, die mithilfe von Stimulus steuert, wie verschachtelte Post-Ressourcen auf einzelnen Haiseiten angezeigt werden. Sie können dies als Ausgangspunkt für zukünftige Entwicklungen und Experimente mit Stimulus verwenden.
Fazit
Stimulus ist eine mögliche Alternative zum Arbeiten mit rails-ujs, JQuery und Frameworks wie React und Vue.
Wie in der Einführung erläutert, ist Stimulus am sinnvollsten, wenn Sie direkt mit vom Server generiertem HTML arbeiten müssen. Es ist leichtgewichtig und zielt darauf ab, Code - insbesondere HTML - so weit wie möglich selbsterklärend zu machen. Wenn Sie den Status auf der Clientseite nicht verwalten müssen, ist Stimulus möglicherweise eine gute Wahl.
Wenn Sie daran interessiert sind, verschachtelte Ressourcen ohne Stimulus-Integration zu erstellen, können Sie https://www.digitalocean.com/community/tutorials/how-to-create-nested-resources-for-a-ruby-on-- Rails-Anwendung [So erstellen Sie verschachtelte Ressourcen für eine Ruby on Rails-Anwendung].
Weitere Informationen zur Integration von React in eine Rails-Anwendung finden Sie unter https://www.digitalocean.com/community/tutorials/how-to-set-up-a-ruby-on-rails-project-with-a -react-frontend [So richten Sie ein Ruby on Rails-Projekt mit einem React-Frontend ein].