Wie erzeuge ich dynamische Elemente dynamisch?

Question

Ich bin auf der Suche nach einer Möglichkeit, Elemente mit Javascript mit Javascript anfügen. Grundsätzlich habe ich zwei Listen von Gegenständen. Einer hat eine Liste von Elementen mit einem "ADD" -Knopf (mit "link_to_remote") und der andere hat eine Liste von Elementen mit einem "REMOVE" -Knopf (mit "link_to_remote"). Wenn ich auf "HINZUFÜGEN" klicke, wird das Objekt sofort in die andere Liste eingefügt. Allerdings muss der neu eingefügte Eintrag die umgekehrte Aktion für "REMOVE" ausführen können.

Ich sehe keine Möglichkeit (abgesehen davon, vielleicht ein Partial zu erstellen, um ein Nicht-Objekt zu rendern), dynamische Elemente dieser Art dynamisch zu generieren.

Answer 1

Haben Sie jQuery ausgecheckt? Es ist eine beliebte JavaScript-Bibliothek. Es kann genau das tun, was Sie mit Leichtigkeit beschrieben haben. Ich benutze es seit Jahren und es lässt mich nie im Stich.

This page of the documentation zeigt die append() Methode. Sie können Dinge tun wie ...

$("span").appendTo("#foo"); 

Der $("span") Teil ein Element findet (oder Elemente) des DOM, dann wird der appendTo("#foo") Teil es auf ein anderes Element des DOM ist anhängt.

Sie können auch beliebige HTML-Snippets anhängen. Bei Bedarf könnte ein solches Snippet über eine AJAX-Anfrage abgerufen werden. jQuery hat wirklich einfache und zuverlässige AJAX-Unterstützung.

Mit jQuery, das Grundkonzept ist, dass Sie JavaScript-Methoden auf DOM-Elemente in einer separaten Datei .js binden, anstatt mit Hilfe von HTML „on_this“ oder „on_that“ attibutes. Also, wenn Sie jQuery für diese Situation verwendet haben, würden Sie nicht in Bezug auf die Generierung von JS-Code durch Vorlagen denken. Die add() und remove() Funktionen wären in Ihrer .js Datei bereit zu gehen und Sie würden binden und lösen Sie sie zu DOM-Elementen nach Bedarf. Wenn Sie zum Beispiel einen li zu der Liste hinzugefügt haben, würden Sie Ihre add()-Funktion von der li-Funktion lösen und die remove()-Funktion daran binden.

Answer 2

Sie möglicherweise für einige Javascript Templating-Lösung suchen. Überprüfen Sie diesen Link aus ...

http://www.hokstad.com/mini-reviews-of-19-ruby-template-engines.html

Hoffnung dies Ihre Frage beantwortet.

Answer 3

WARNUNG: Hacky-Lösung.

Ich habe eine Auswahlliste, die ich dynamisch hinzufügen und Elemente aus entfernen muss. Beides sind AJAX-Aufrufe.

Die Controller-Methode rendert einen Teil, der Javascript enthält, um Elemente aus der Auswahlliste hinzuzufügen und/oder zu entfernen. Das Partial, das wie jedes andere Partial eine einfache alte erb-Datei ist, fügt die entsprechenden DOM-Identifier ein (die aus den Objekt-IDs der Objekte in der Liste generiert werden).

Ich sah mir ein paar Javascript Vorlagenlösungen an, aber keine davon war flexibel genug. Am Ende war es einfacher, das Javascript selbst zu generieren.

Answer 4

Dies kann ziemlich einfach sein. Es gibt eine Menge Dinge, die das für dich tun (schau dir jQuery an).

Ich habe vor einiger Zeit etwas handcodiert (Entschuldigung für den schlecht geschriebenen Code).Sie fügt hinzu, und entfernen Sie Titel aus einer Playlist

Controller:

def add_track 
    unless session[:admin_playlist_tracks].include?(params[:recording_id]) 
     session[:admin_playlist_tracks] << params[:recording_id] 
    end 
    render :partial => "all_tracks" 
    end 

    def remove_track 
    session[:admin_playlist_tracks].delete_if {|x| x.to_s == params[:recording_id].to_s } 
    render :partial => "all_tracks" 
    end 

Behälter:

<div id="artist_recordings" class="autocomplete_search"></div> 

Hinzufügen von Material:

<%= link_to_remote "Add", 
           :url => {:controller => :playlists, :action => :add_track, :recording_id => recording.id}, 
           :update =>"all_tracks", 
           :complete => visual_effect(:highlight, 'all_tracks') %> 

anzeigen/Entfernen von Material:

<%session[:admin_playlist_tracks].each do |recording_id|%> 
     <div style="margin-bottom:4px;"> 
      [<%=link_to_remote "Remove", 
            :url => {:controller => :playlists, :action => :remove_track, :recording_id => recording_id}, 
            :update =>"all_tracks"%>] 
      <%recording = Recording.find_by_id(recording_id)%>      
      <%=recording.song.title%> <br /> 
      by <%=recording.artist.full_name%> (<%=recording.release_year%>) 
     </div>     
    <%end%> 

Das mit mir gearbeitet, weil ich Session-Variablen verwenden könnte. Aber sei vorsichtig! In einigen Fällen, in denen ein Benutzer verschiedene Fenster mit dem gleichen Formular hat, wird dies sicherlich unterbrochen, da es einen gleichzeitigen Zugriff auf die Sitzungsvariable geben wird.

Es fehlen einige Teile, da ich auch eine automatische Vervollständigung mache, aber ich hoffe, das wird Ihnen helfen, die große Idee zu bekommen.