Fügen Sie der Startseite eine JavaScript-Anzeige hinzu, um aus 140 Zeichen zu zählen. (Rails Tutorial, 2. Ausgabe, Kapitel 10, Übung 7)

Question

Diese Übung war ein bisschen schwierig. Ich dachte, ich würde meine Lösung posten, um zu sehen, ob es jemand anders gemacht hat oder ob es jemanden gibt, der einen besseren Weg kennt.

Ich bin nicht sicher, Best Practices für die Verwendung der Asset Pipline .. zum Beispiel die richtige Reihenfolge, um Dinge in die application.js Manifest-Datei zu setzen, oder wenn Dinge in lib versus App zu setzen. Ich gebe einfach folgendes in lib ein, um es zum Laufen zu bringen.

---

Von Michael Hartl's Rails Tutorial 2nd ed Kapitel 10, Übung 7:

(anspruchsvoll) hinzufügen JavaScript Anzeigeseite zum Start unten von 140 Zeichen zu zählen.

Zuerst las ich diese post about jQuery Twitter-like countdowns, die den Code zur Verfügung stellte.

nächstes I aktualisiert app/views/shared/_micropost_form.html.erb wie folgt aussehen:

<%= form_for(@micropost) do |f| %> 
    <%= render 'shared/error_messages', object: f.object %> 
    <div class="field"> 
     <%= f.text_area :content, placeholder: "Compose new micropost..." %> 
    </div> 
    <%= f.submit "Post", class: "btn btn-large btn-primary" %> 
    <span class="countdown"></span> 

<% end %> 

Dann habe ich ein javascripts Verzeichnis in lib und hinzugefügte Datei

lib/Vermögen

function updateCountdown() { 
    // 140 is the max message length 
    var remaining = 140 - jQuery('#micropost_content').val().length; 
    jQuery('.countdown').text(remaining + ' characters remaining'); 
} 

jQuery(document).ready(function($) { 
    updateCountdown(); 
    $('#micropost_content').change(updateCountdown); 
    $('#micropost_content').keyup(updateCountdown); 
}); 

/javascripts/microposts.js Schließlich fügte ich ein winziges bisschen CSS

app/assets/Stylesheets/custom.css.scss

/* micropost jQuery countdown */ 

.countdown { 
    display: inline; 
    padding-left: 30px; 
    color: $grayLight; 
} 

Schließlich fügt Richtlinie zu dem app/assets/Javascripts/application.js

//= require jquery 
//= require jquery_ujs 
//= require bootstrap 
//= require microposts 
//= require_tree . 

Das endgültige Ergebnis wie diese http://grab.by/dbC6

sieht

---

Frage: wäre es falsch, das Manifest li zu setzen nes nach //= require_tree .

Zum Beispiel, das funktioniert, aber ich bin mir nicht sicher, was der Unterschied wäre, versus Hinzufügen der Linie über Baum.

//= require jquery 
//= require jquery_ujs 
//= require bootstrap 
//= require_tree . 
//= require microposts 

Answer 1

Ich denke my solution posted here in SO verschieden genug von Ihnen ist jetzt, dass ich demütig es als Antwort veröffentlichen können.

Answer 2

Sie können es mit Coffee vereinfachen:

/app/assets/javascripts/microposts.js.coffee

 
updateCountdown = -> 
    remaining = 140 - jQuery("#micropost_content").val().length 
    jQuery(".countdown").text remaining + " characters remaining" 

jQuery -> 
    updateCountdown() 
    $("#micropost_content").change updateCountdown 
    $("#micropost_content").keyup updateCountdown 

Und wie jonyamo erwähnt, brauchen Sie nicht die berühren application.js wie die //= require_tree . bereits den Trick macht.

Answer 3

Ich weiß nicht warum, aber diese Lösung funktionierte nur für mich mit Kaffee-Skript. Ich habe versucht, es mit Javascript zu implementieren, aber es hat irgendwie nichts angezeigt: noch der Countdown, noch der feste Teil des Textes "Zeichen bleiben".

Also hier ist eine Zusammenfassung von dem, was ich getan habe.

Schritt 1: Erstellen Sie eine app/Javascripts/microposts.js.coffee Datei

updateCountdown = -> 
    remaining = 140 - jQuery("#micropost_content").val().length 
    jQuery(".countdown").text remaining + " characters remaining" 

jQuery -> 
    updateCountdown() 
    $("#micropost_content").change updateCountdown 
    $("#micropost_content").keyup updateCountdown 

NB: Ist, dass in der app/Javascripts Ordner, um seinen gelegt, ich habe nicht die application.js aktualisieren müssen Datei.

Schritt 2: Aktualisieren der _micropost_form.html.erb Teil:

<%= form_for(@micropost) do |f| %> 
    <%= render 'shared/error_messages', object: f.object %> 
    <div class="field"> 
     <%= f.text_area :content, placeholder: "Compose new micropost..." %> 
    </div> 
    <%= f.submit "Post", class: "btn btn-large btn-primary" %> 
    <span class="countdown"></span> 
<% end %> 

Schritt 3: ein bisschen CSS an die custom_css.css.scss Datei implementieren

/* micropost jQuery countdown */ 

.countdown { 
    display: inline; 
    padding-left: 10px; 
    color: $grayLight; 
} 

Schritt 4: genießen das Ergebnis und sei froh, dass alles klappt :)

Answer 4

Hier ist meine coffeescript-Version basierend auf Adriano's Lösung. Dies ignoriert Whitespace, beinhaltet nicht das Hinzufügen von leeren Divs in die Ansicht und fügt auch eine Fehlerklasse hinzu, sobald Sie zu Minuszahlen kommen.

updateCountdown = -> 
    text = jQuery('#micropost_content').val() 
    text = text.replace(/\s/g, ''); 
    remaining = 140 - text.length 
    jQuery('.countdown').text remaining + ' characters remaining' 
    jQuery('.countdown').addClass 'alert alert-error' if remaining < 0 
    jQuery('.countdown').removeClass 'alert alert-error' if remaining > 0 

jQuery(document).ready -> 
    jQuery('#new_micropost').append '<span class="countdown">140 characters remaining</span>' 
    jQuery('#micropost_content').change updateCountdown 
    jQuery('#micropost_content').keyup updateCountdown 
    return 

Answer 5

Mein microposts.js.coffee verwendet die .css method jQuery die Farbe der Zeichen zu ändern, auf dem Wert der Variablen remaining basierend bleibt stärker an twitter das Verhalten von allen

updateCountdown = -> 
    remaining = 140 - jQuery("#micropost_content").val().length 
    jQuery(".countdown").text remaining + " characters remaining" 
    jQuery(".countdown").css "color", (if (140 >= remaining >= 21) then "gray") 
    jQuery(".countdown").css "color", (if (21 > remaining >= 11) then "black") 
    jQuery(".countdown").css "color", (if (11 > remaining) then "red") 

jQuery -> 
    updateCountdown() 
    $("#micropost_content").change updateCountdown 
    $("#micropost_content").keyup updateCountdown 

Dank Spiegel, der vor beantwortet .

Answer 6

Ich habe Bretts Code verwendet, um mich durch diese Übung im Rails Tutorial zu bringen, obwohl ich eine kleine Änderung habe. Ich hatte Probleme mit dem Text, der aus dem Countdown-Element verschwand, wenn ich zu einer anderen Seite navigierte, und dann zurück zu Home. Mit ein wenig Nachforschungen und help from another answer on SO erkannte ich, dass die Ursache Turbolinks war. Meine Änderung zu Bretts Code, der an page:change Ereignis statt an ready gebunden ist, ist unten. Ich hoffe, dass das einigen anderen hilft.

function updateCountdown() { 
    // 140 is the max message length 
    var remaining = 140 - jQuery('#micropost_content').val().length; 
    jQuery('.countdown').text(remaining + ' characters remaining'); 
} 

function micropostChange() { 
    $('#micropost_content').change(updateCountdown); 
} 

function micropostKeyup() { 
    $('#micropost_content').keyup(updateCountdown); 
} 

jQuery(document).ready(function($) { 
    updateCountdown(); 
    micropostChange(); 
    micropostKeyup(); 
    jQuery(document).on('page:change', function($) { 
    updateCountdown(); 
    micropostChange(); 
    micropostKeyup(); 
    }); 
}); 

Answer 7

Um minus Charakter zu vermeiden Countdown ich diese Grenze hinzugefügt Teil _micropost_form.html.erb, so dass es hält Sie auf 140 Zeichen:

<%= f.text_area :content, maxlength:140, placeholder: "Compose new micropost..." %>