In-Place Editing

Bearbeite ein Attribut direkt auf der Seite, ohne die Seite zu verlassen, mithilfe des "Best In Place"-Gems. Erfahre, wie du Validierungen hinzufügst und Unterstützung für verschiedene Feldtypen implementierst.

Vorbereitung:

rails new InPlaceEditing

Zusätzlich zu den Standart gems:

gem 'jquery-rails'
gem 'sassc-rails'

User installation.

rails g scaffold User name email gender public_profile:boolean bio:text
rails db:migrate

User form Partial update gender.

// app/views/users/_form.html.erb

<%= form.select :gender, %w[Male Female Unspecified] %>

Oben sehen wir eine Benutzerprofilseite einer Rails-Anwendung. Am unteren Rand der Seite gibt es einen Link "Profil bearbeiten", und wenn wir auf diesen Link klicken, gelangen wir zu einer Seite, auf der wir unsere Details bearbeiten können.

Anstelle einer separaten Bearbeitungsseite möchten wir Benutzern die Möglichkeit geben, die Felder direkt auf der Profilseite durch einen Klick auf jedes Feld direkt zu bearbeiten. Dies sollte es ermöglichen, das Feld zu bearbeiten, und durch Drücken von "Enter" oder Verlassen des Feldes sollten Änderungen im Datenbank gespeichert werden.

Best In Place

Es gibt mehrere Rails-Plugins, die uns helfen können, Inline-Bearbeitung zu unserer Anwendung hinzuzufügen, und eine umfassende Liste davon finden Sie auf The Ruby Toolbox. Dasjenige, das wir verwenden werden, heißt Best In Place, obwohl die anderen einen Blick wert sind. Best In Place ist eine Abspaltung eines anderen Projekts namens Rest in Place, und das, was es lohnenswert macht, ist die bereitgestellte best_in_place-Hilfsmethode. Diese macht es einfach, Inline-Bearbeitungsfelder in unsere Rails-Anwendungen einzufügen.

Best In Place verfügt über eine Demo-Seite, und wenn wir sie ausprobieren, sehen wir, dass wir jedes Feld durch einen Klick bearbeiten können. Dadurch wird der statische Text durch ein Formularfeld ersetzt, das für diesen Datentyp geeignet ist, der bearbeitet wird. Wenn wir "Enter" drücken oder aus dem Feld herausklicken, werden die Änderungen an den Server gesendet und die Datenbank wird aktualisiert. Best In Place unterstützt Validierungen. Wenn wir beispielsweise eine ungültige E-Mail-Adresse eingeben, sehen wir eine Fehlermeldung, und der eingegebene Wert wird auf den letzten gültigen Wert zurückgesetzt. Es unterstützt auch verschiedene Datentypen und kann daher ein Dropdown-Menü für die Bearbeitung einer Assoziation anzeigen oder zwischen zwei Werten für ein boolesches Feld umschalten. Schauen wir uns an, was erforderlich ist, um es zu unserer Profilseite hinzuzufügen.

Hinzufügen von Best In Place zu unserer Anwendung
Um Best In Place zu unserer App hinzuzufügen, müssen wir zuerst sein Gem zur Gemfile unserer Anwendung hinzufügen und dann bundle ausführen.

// gemfile

gem "best_in_place", git: "https://github.com/mmotherwell/best_in_place"

Das Gem enthält 4 JavaScript-Dateien, die wir in unserer Anwendung einbinden müssen: jquery, und best_in_place, jquery-ui und best_in_place.jquery-ui. Da für erstellen wir den Ordner javascrippts unter den assets und erstellen die Datei application.js.

// app/assets/javascripts/application.js

//= require jquery
//= require best_in_place

//= require jquery-ui
//= require best_in_place.jquery-ui

//= require_tree .

Wichtig den Server neu zu starten.

Wir müssen die Felder definieren, die bearbeitbar sein sollen, und das werden wir in der js-Datei der Benutzer tun. Alles, was wir tun müssen, ist best_in_place() auf jedem Element aufzurufen, das bearbeitbar sein soll. Wir werden es auf Elemente mit der Klasse best_in_place anwenden, was intern von Best In Place verwendet wird.

// app/assets/javascripts/application.js

$(document).ready(function () {
  /* Activating Best In Place */
  jQuery(".best_in_place").best_in_place();
});

Nun, da wir Best In Place eingerichtet haben, können wir beginnen, es auf unserer Benutzerprofilseite anzuwenden. So sieht der aktuelle Aufbau des Seitentemplates aus:

// app/views/users/_user.html.erb

<div id="<%= dom_id user %>">
  <p>
    <strong>Name:</strong>
    <%= user.name %>
  </p>

  <p>
    <strong>Email:</strong>
    <%= user.email %>
  </p>

  <p>
    <strong>Gender:</strong>
    <%= user.gender %>
  </p>

  <p>
    <strong>Public profile:</strong>
    <%= user.public_profile %>
  </p>

  <p>
    <strong>Bio:</strong>
    <%= user.bio %>
  </p>

</div>

Das Template gibt einfach den Wert für jedes Feld aus. Wir werden die Hilfsmethode von Best In Place zu den Feldern "Name" und "E-Mail" hinzufügen. Diese Methode nimmt zwei Argumente entgegen: das Objekt, das wir betrachten, und ein Symbol für das zu bearbeitende Feld.

// app/views/users/_user.html.erb

  <p>
    <strong>Name:</strong>
    <%= best_in_place user, :name %>
  </p>

  <p>
    <strong>Email:</strong>
    <%= best_in_place user, :email %>
  </p>

Wenn wir die Benutzerprofilseite jetzt laden und auf das Feld "Name" oder "E-Mail" klicken, wird dieses Feld bearbeitbar.

Änderungen speichern

Wenn wir eine Änderung an einem Feld vornehmen und dann darauf klicken, um es zu verlassen, wird das Feld aktualisiert. Wenn wir die Seite dann neu laden, sehen wir, dass der Benutzer aktualisiert wurde, und die Seite zeigt den geänderten Wert an.

Wir erstellen eine kleine Validierung, dass der Name sein muss und die eMail korrekt dargestellt wird.

// app/models/user.rb
  
  validates :name, presence: true
  VALID_EMAIL_REGEX = /\A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/i
  validates :email, format: { with: VALID_EMAIL_REGEX }

Nun können wir testen eine falsche eMail einzugeben, er korrigiert automatisch auf die noch bestehende eMail.

Umgang mit anderen Datentypen

Bisher haben wir nur die Felder "Name" und "E-Mail" bearbeitbar gemacht. Nun werden wir uns die anderen Attribute auf der Benutzerseite ansehen. Das Feld "Bio" enthält einen langen Text, aber standardmäßig zeigt best_in_place nur ein Textfeld mit einer einzigen Zeile an. Wir können dieses Verhalten ändern, indem wir das type-Attribut festlegen.

// app/views/users/_user.html.erb
  <p>
    <strong>Bio:</strong>
    <%= best_in_place user, :bio, :as => :textarea %>
  </p>

Das Feld "public_profile" ist vom Typ Boolean, daher sollten wir den Checkbox-Typ verwenden und die Werte, die in einer :collection-Option angezeigt werden sollen, übergeben.

  <p>
    <strong>Public profile:</strong>
    <%= best_in_place user, :public_profile, :as => :checkbox, collection: %w[No Yes] %>
  </p>

Durch Klicken auf die aktuelle Option für das öffentliche Profil wird jetzt zwischen diesen beiden Optionen umgeschaltet. Die Geschlechtsoption kann auf ähnliche Weise behandelt werden, aber hier verwenden wir :select anstelle von :checkbox und übergeben ein zweidimensionales Array von Optionen.

  <p>
    <strong>Gender:</strong>
    <%= best_in_place user, :gender, :as => :select, :collection => %w(Male Female Unspecified) %>
  </p>

Diese Option zeigt ein Dropdown-Menü an, wenn wir auf das aktuelle Geschlecht klicken.

Das war es für diese Episode. Wir haben jetzt eine voll funktionsfähige Inline-Bearbeitungsoption für jedes Feld auf unserer Benutzerprofilseite. Es gibt möglicherweise Situationen, in denen wir etwas Komplizierteres tun möchten, beispielsweise Optionen für eine Assoziation anzeigen oder vielleicht ein formatiertes Preisfeld, bei dem der angezeigte Wert vom Wert im Bearbeitungsfeld abweichen kann.

Quelle:
https://github.com/bernat/best_in_place

Meld dich an und schreibe ein Kommentar