Это упражнение было немного сложным. Понял, что я опубликую свое решение, чтобы узнать, кто-то сделал это по-другому или кто-нибудь, кто знает лучший способ.
Я не уверен в передовом опыте использования Asset Pipline.. например, правильный порядок, чтобы поместить вещи в файл манифеста application.js или когда нужно поместить вещи в lib против приложения. Я просто поставил следующее в lib, чтобы попытаться заставить его работать.
Из Michael Hartl Rails Tutorial 2nd ed Глава 10, Упражнение 7:
(сложный) Добавьте отображение JavaScript на главную страницу, чтобы считать от 140 символов.
Во-первых, я прочитал этот пост о jQuery Twitter-подобных обратных отсчетах, который предоставил код для этого.
Затем я обновил приложение /views/shared/ _micropost_form.html.erb, чтобы выглядеть так:
<%= 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 %>
Затем я создал каталог javascripts в lib и добавил файл
Lib/активы/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
Приложение/активы/таблицы стилей /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
