Questo esercizio è stato un po 'complicato. Ho pensato di pubblicare la mia soluzione per vedere se qualcuno lo ha fatto in modo diverso o se c'è qualcuno che conosce un modo migliore.Aggiungere un display JavaScript alla Home page per il conto alla rovescia da 140 caratteri. (Rails Tutorial, 2nd Ed, Chapter 10, Exercise 7)
Non sono sicuro delle best practice per l'utilizzo di Asset Pipline. Ad esempio, l'ordine corretto di inserire le cose nel file manifest dell'applicazione .js o quando mettere le cose in lib contro app. Ho appena messo il seguente in lib per provare a farlo funzionare.
Da Michael Hartl's Rails Tutorial 2nd ed Capitolo 10, Esercizio 7:
(impegnativo) Aggiungi un display JavaScript alla Home page di conto alla rovescia da 140 caratteri.
In primo luogo, ho letto questo post about jQuery Twitter-like countdowns, che ha fornito il codice per farlo.
Avanti, ho aggiornato app/views/shared/_micropost_form.html.erb a guardare come questo:
<%= 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 %>
Poi, ho creato una directory javascript in lib e file aggiunto
lib/attività /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);
});
Infine, ho aggiunto un po 'di CSS
app/beni/fogli di stile/custom.css.scss
/* micropost jQuery countdown */
.countdown {
display: inline;
padding-left: 30px;
color: $grayLight;
}
Infine, aggiungere direttiva per le app/attività/javascript/application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require microposts
//= require_tree .
il risultato finale assomiglia a questo http://grab.by/dbC6
domanda: sarebbe sbagliato mettere il li manifesta nes after
Ad esempio, questo funziona ma non sono sicuro quale sarebbe la differenza, rispetto all'aggiunta della linea sopra l'albero.
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
//= require microposts
Vorrei suggerire mettere le microposts.js file in app/assets/javascripts /, in questo modo non devi preoccuparti di aggiungere la riga aggiuntiva in app/assets/javascripts/application.js dato che verrà inclusa automaticamente tramite '// = require_tree .'. Altrimenti, sembra buono e funziona bene. – jonyamo
Grazie per aver condiviso il tuo codice. L'ho fatto riferimento quando ho eseguito la mia implementazione del conto alla rovescia, che ho poi posto alcune domande su SO [qui] (http://stackoverflow.com/q/10955850/567863). Spero che se ti fornisca del materiale di riferimento nello stesso modo in cui la tua domanda ha fatto per me. –