--Verwenden Sie Rubin auf Schienen 6.0.0.
Dies ist eine Zusammenfassung des letzten Males (Teil 4) . Wir konnten Funktionen zum Registrieren und Bearbeiten von Produktinformationen implementieren, die mehrere Bilder enthalten. Es fühlt sich an, als wäre die Arbeit erledigt.
Die Einführung und das Verfahren sind übrigens ausführlich in <a href="https://qiita.com/silvercrow222/items/55aeb5d13ec2bde305db""> Teil1 beschrieben. Schauen Sie also bitte vorbei, wenn Sie interessiert sind.
Komm schon! Alles was bleibt ist die Vorschau!
Beginnen wir mit js. Was Sie tun, ähnelt dem, was Sie mit dem Formular getan haben.
Erstellen Sie eine Funktion für die HTML-Generierung und zeigen Sie gleichzeitig ein neues Formular an. Wenn Sie das Bild löschen, wird auch die Vorschau ausgeblendet.
app/assets/javascripts/product.js
$(function() {
// ~Kürzung~
const buildImg = (index, url)=> {
const html = `<img data-index="${index}" src="${url}" width="100px" height="100px">`;
return html;
}
// ~Kürzung~
$('#image-box').on('change', '.file', function(e) {
const targetIndex = $(this).parent().data('index');
const file = e.target.files[0];
const blobUrl = window.URL.createObjectURL(file);
if (img = $(`img[data-index="${targetIndex}"]`)[0]) {
img.setAttribute('src', blobUrl);
} else {
$('#image-box').append(buildFileField(fileIndex[0]));
fileIndex.shift();
fileIndex.push(fileIndex[fileIndex.length - 1] + 1)
}
});
// ~Kürzung~
$('#image-box').on('click', '.remove', function() {
// ~Kürzung~
$(`img[data-index="${targetIndex}"]`).remove();
});
});
Es ist lange her, aber es ist so. Nur der Mittelteil ist kompliziert, deshalb denke ich nicht, dass ich so vorbereitet sein werde.
Fügen wir der Reihe nach Erklärungen hinzu.
const buildImg = (index, url)=> {
const html = `<img data-index="${index}" src="${url}" width="100px" height="100px">`;
return html;
Zuallererst ist es eine Funktion, HTML zu generieren, aber ich denke, dass es in Ordnung ist, weil es nichts besonders Schwieriges gibt. Das Bild wird angezeigt, während die Größe mit der als Argument übergebenen URL angegeben wird.
$('#image-box').on('change', '.file', function(e) {
//Ruft den eindeutigen Index ab, der dem Formular zugewiesen ist.
const targetIndex = $(this).parent().data('index');
//Rufen Sie die URL der Bilddatei im Web ab.
const file = e.target.files[0];
const blobUrl = window.URL.createObjectURL(file);
//Bedingte Verzweigung abhängig vom Vorhandensein oder Fehlen eines Bildes mit dem entsprechenden Index
if (img = $(`img[data-index="${targetIndex}"]`)[0]) {
//Ersetzen Sie die URL des in der vorherigen Zeile erhaltenen Bildes.
img.setAttribute('src', blobUrl);
} else {
$('#previews').append(buildImg(targetIndex, blobUrl));
$('#image-box').append(buildFileField(fileIndex[0]));
fileIndex.shift();
fileIndex.push(fileIndex[fileIndex.length - 1] + 1)
Dies ist der Vorgang, wenn das nächste Bild ausgewählt wird. Der Inhalt ist so.
Es ist schwierig, die URL in der 5. und 6. Zeile zu finden, aber ich bin mir nicht sicher, deshalb werde ich sie später genauer untersuchen. Seien Sie versichert, dass die Operation selbst funktionieren wird.
Übrigens fügt der Teil nach sonst nur eine Vorschau-Anzeige zur ursprünglichen Beschreibung hinzu. Weitere Informationen finden Sie im vorherigen Teil.
Der Grund für das Verschieben unter andere ist, dass im vorherigen Status ein neues Formular angezeigt wurde, indem nur das Bild ersetzt wurde. Wenn Sie diese Typen unter "Andere" setzen, wird das Formular nur hinzugefügt, wenn Sie ein Bild hinzufügen.
$(`img[data-index="${targetIndex}"]`).remove();
Dies ist die letzte, aber ich lösche nur die Vorschau mit der Schaltfläche Löschen. Das ist es wirklich.
Nachdem die js-Verarbeitung abgeschlossen ist, fügen wir eine Vorschau hinzu, die vorab auf dem Bearbeitungsbildschirm angezeigt werden soll.
haml:app/views/products/_form.html.haml
= form_with model: @product, local: true do |f|
= f.text_field :name, placeholder: 'name'
#image-box
#previews
- if @product.persisted?
- @product.images.each_with_index do |image, i|
= image_tag image.src.url, data: { index: i }, width: '100', height: '100'
= f.fields_for :images do |i|
// ~Kürzung~
= f.submit 'SEND'
Ich habe den Teil *@product.persisted? * Hinzugefügt. Die mit dem Produkt verknüpften Bilder werden einzeln nach URL herausgenommen und mit image_tag angezeigt.
Übrigens ist .each_with_index eine Methode, die Zahlen gleichzeitig mit .each durch Setzen von zwei Argumenten einzeln zuweist.
Jetzt ist auch die Vorschaufunktion implementiert. Das bedeutet
Endlich fertig! !! Es hat eine ganze Weile gedauert, aber ich habe es geschafft, es zu beenden. Huh.
Obwohl gesagt wird, dass es abgeschlossen ist, wurde nur der funktionale Aspekt abgeschlossen, so dass es sich anfühlt, als würde man sich langsam markieren.
Ich konnte jedoch alle Inhalte der Spezifikationen umsetzen. Es tut mir leid, dass ich es lange geschrieben habe, obwohl ich nicht wirklich viele schwierige Dinge mache.
Ich glaube nicht, dass es da ist, aber ich danke Ihnen lange, wenn jemand es bis zum Ende gelesen hat. Ich hoffe es wird für Sie hilfreich sein.
Recommended Posts