Добавьте дисплей JavaScript на домашнюю страницу для обратного отсчета от 140 символов. (Учебник по Rails, 2-е изд., глава 10, упражнение 7)

Это упражнение было немного сложным. Решил, что опубликую свое решение, чтобы узнать, сделал ли кто-нибудь по-другому или есть кто-нибудь, кто знает лучший способ.

Я не уверен в лучших практиках использования Asset Pipline… например, в правильном порядке размещения элементов в файле манифеста application.js или в том, когда размещать элементы в lib, а не в приложении. Я просто добавил следующее в lib, чтобы попытаться заставить его работать.

Из Учебник Майкла Хартла по Rails, 2-е изд. Глава 10, упражнение 7:

(сложное )Добавьте экран JavaScript на домашнюю страницу для обратного отсчета от 140 символов.

Во-первых, я прочитал этот пост о jQuery Twitter -вроде обратного отсчета , в котором был предоставлен код для этого.

Далее,Я обновил app/views/shared/ _micropost _form.html.erb, чтобы он выглядел следующим образом :

<%= form_for(@micropost) do |f| %>
    <%= render 'shared/error_messages', object: f.object %>
    

        <%= f.text_area :content, placeholder: "Compose new micropost..." %>
    
    <%= f.submit "Post", class: "btn btn-large btn-primary" %>
    

<% end %>

. Затем я создал каталог javascripts в lib и добавил файл

lib/assets/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);
});

Наконец, я добавил немного CSS

app/assets/stylesheets/custom.css.scss

/* micropost jQuery countdown */

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

Наконец, добавил директиву в app/assets/javascripts/application.js

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

ОКОНЧАТЕЛЬНЫЙ РЕЗУЛЬТАТ выглядит такhttp://grab.by/dbC6

Вопрос: Было бы неправильно помещать строки манифеста после//= require_tree.

Например, это работает, но я не уверен, в чем разница по сравнению с добавлением строки над деревом.

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