2017-06-22 5 views
0

Ich möchte ein Element Inhalt setzen, falls sie leer ist.
Der html.erb Code ist unten:Arbeits jQwery Code funktioniert nicht in bedingten

<div class="comments-section"> 
    <% if micropost.comments.any? %> 
    <ol id="comments_micropost-<%= micropost.id %>"> 
     <% micropost.comments.each do |comment| %> 
     <%= render comment %> 
     <% end %> 
    </ol> 
    <% end %> 
</div> 

Das Element I gesetzt werden soll der Inhalt <div class="comments-section"> ist. Sein Inhalt ist leer, wenn der Micropost noch keine Kommentare hat.
ich die Wirkung von Kommentaren mit Javascript in create.js.erb erstellen handhaben: Ich schrieb zwei Zeilen Code, je nachdem, ob micropost.comments Null ist oder es ist nicht nil:

Fall 1: micropost noch nicht Kommentare hat (micropost.comments.any? ist falsch) :

$('#micropost-<%= @micropost.id %>').find('.comments-section').html("<%= escape_javascript(render partial: 'comments/first_comment') %>"); 

Fall 2: micropost hat kommentiert bereits (micropost.comments.any? ist true):

var comments = $('ol#comments_micropost-<%= @micropost.id %>'); 
comments.append('<%= escape_javascript(render partial: @comment) %>'); 

Beide Teile des Codes arbeiten, wenn sie getrennt verwendet werden. Doch der Code von Fall 1 funktioniert nicht, wenn sie mit Fall 2 in den folgenden bedingten eingefügt zusammen:

if (comments == null) { 
    $('#micropost-<%= @micropost.id %>').find('.comments-section').html("<%= escape_javascript(render partial: 'comments/comments') %>"); 
} 
else { 
    comments.append('<%= escape_javascript(render partial: @comment) %>'); 
}; 

Ich verstehe nicht, warum, wenn if (comments == null) der Code nicht ausgeführt wird. Ich habe auch versucht mit if (comments == undefined) und mit if (!comments) ohne Verbesserungen.
Stattdessen wird der else Teil des bedingten erfolgreich ausgeführt.

+0

keine Änderungen auch mit '' comments.blank OR 'Kommentare == '''?. Ja 'Kommentare' stammen von' var comments': Wie kann ich die Länge gleich 0 ausdrücken? – Asarluhi

+1

@Asarluhi, wenn die Länge größer als 0 ist, als es verfügbar ist. Wenn die Länge 0 ist, ist sie nicht verfügbar. – Vishal

+0

Even 'if (comments.length === null)' funktioniert nicht. Ich weiß nicht warum, eine der obigen Lösungen sollte an dieser Stelle funktionieren. – Asarluhi

Antwort

1

ist ein nicht-existent DOM-Element mit length = 0 von JavaScript als Objekt betrachtet. Sie können dies überprüfen, indem Sie eine Webbrowserkonsole verwenden, das DOM-Element schreiben und die Konsolenausgabe überprüfen. Wählen Sie eine micropost ohne Kommentare (sagen micropost mit id = 304): micropost.comments.any? falsch wäre und alles in div.comments-section nicht im Dokument angezeigt. Öffnen Sie die Konsole und schreiben Sie den folgenden Code an der Eingabeaufforderung:

$('ol#comments_micropost-304'); 

Der Ausgang wird:

  1. [] in einem Chrom-basierten Browser
  2. Object { length: 0, prevObject: Object, context: HTMLDocument → 1, selector: "ol#comments_micropost-304" } in Firefox

Das Original if Anweisung funktioniert nicht, da das Objekt nicht null ist und length = 0. Deshalb ist die richtige if-Anweisung ist: if (comments.length == 0)