Dodaj wyświetlacz JavaScript do strony głównej, aby odliczać od 140 znaków. (Poradnik Rails, 2. Ed, Rozdział 10, Ćwiczenie 7)

Question

To ćwiczenie było trochę trudne. Pomyślałem, że opublikuję moje rozwiązanie, aby sprawdzić, czy ktoś zrobił to inaczej, czy jest ktoś, kto zna lepszy sposób.

Nie jestem pewien co do najlepszych praktyk dotyczących korzystania z Pipeline aktywów. Na przykład, poprawna kolejność umieszczania elementów w pliku manifestu aplikacji application.js lub kiedy umieszczać elementy w lib w porównaniu do aplikacji. Właśnie dodałem do biblioteki następujące elementy, aby spróbować uruchomić to.

---

Od Michael Hartl's Rails Tutorial 2nd ed Rozdział 10, Ćwiczenie 7:

(wyzwanie) Dodaj wyświetlacz JavaScript do strony głównej odliczać od 140 znaków.

Najpierw przeczytałem ten numer post about jQuery Twitter-like countdowns, który podał kod, aby to zrobić.

Następnie, zaktualizowane app/views/shared/_micropost_form.html.erb wyglądać tak:

<%= 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 %> 

Potem stworzył JavaScripts w katalogu lib i dodał plik

lib/aktywa /javascripts/microposts.js

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); 
}); 

na koniec dodałem odrobinę CSS

app/assets/stylów/custom.css.scss

/* micropost jQuery countdown */ 

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

Wreszcie dodać dyrektywę do app/assets/JavaSkrypty/application.js

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

wynik końcowy wygląda tak http://grab.by/dbC6

---

Pytanie: błędem byłoby umieścić oczywistego li nes po //= require_tree .

Na przykład działa to, ale nie jestem pewien, jaka byłaby różnica, w porównaniu do dodania linii powyżej drzewa.

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

Answer 1

myślę my solution posted here in SO jest na tyle różne od Ciebie teraz, że mogę pisać pokornie go jako odpowiedź.

Answer 2

można uprościć stosując coffeescript:

/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 

jak wspomniano przez jonyamo, nie trzeba dotykać application.js jako //= require_tree . już robi lewę.

Answer 3

Nie wiem dlaczego, ale to rozwiązanie sprawdziło się tylko przy użyciu skryptu do kawy. Próbowałem zaimplementować go za pomocą javascript, ale w jakiś sposób nic nie wyświetlało: ani odliczanie, ani ustalona część tekstu "pozostałe znaki".

Oto podsumowanie tego, co zrobiłem.

Krok 1: Utwórz plik app/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 

Uwaga: Jako że produkty umieszczone w folderze app/JavaScripts, nie trzeba aktualizować application.js plik.

Etap 2 aktualizowania _micropost_form.html.erb częściowe:

<%= 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 %> 

Etap 3: wprowadzania trochę CSS pliku custom_css.css.scss

/* micropost jQuery countdown */ 

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

Etap 4: korzystać wynik i bądź szczęśliwy, że to wszystko działa :)

Answer 4

Oto moja wersja coffeescript oparta na rozwiązaniu Adriano. To ignoruje białe znaki, nie obejmuje dodawania pustych elementów div do widoku, a także dodaje klasę błędów po uzyskaniu ujemnych liczb.

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

My microposts.js.coffee używa jQuery .css method zmienić kolor pozostałych znaków na podstawie wartości zmiennej remaining ściślej odzwierciedlać zachowanie twitter

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 

Dziękujemy wszystkim, którzy odpowiedzieli przed .

Answer 6

Użyłem kodu Bretta, aby przeprowadzić mnie przez to ćwiczenie w Poradniku Railsowym, chociaż mam drobną zmianę. Miałem problemy z tekstem znikającym z elementu .countdown, kiedy nawigowałem na inną stronę, a następnie z powrotem do strony głównej. Z drobnymi badaniami i help from another answer on SO zdałem sobie sprawę, że przyczyną były Turbolinks. Moja zmiana w kodzie Bretta, wiążąca się z wydarzeniem page:change zamiast z ready, jest poniżej. Mam nadzieję, że to pomoże niektórym innym.

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

W celu uniknięcia minus charakter odliczać dodałem ten limit do _micropost_form.html.erb częściowy, więc zatrzyma cię na 140 znaków:

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