将JavaScript显示添加到主页以从140个字符开始倒计时。 （Rails教程，第2版，第10章，练习7）
这个练习有点棘手。 想我发布我的解决方案，看看是否有人做了不同的事情，或者是否有人知道更好的方式。
我不确定使用Asset Pipline的最佳实践..例如，将内容放入application.js清单文件中的正确顺序，或何时将内容放入lib与app中。 我只是将以下内容放在lib中以尝试使其工作。
来自Michael Hartl的Rails教程第2章第10章，练习7：
（具有挑战性）将JavaScript显示添加到主页以从140个字符开始倒计时。
首先，我读了这篇关于jQuery类似Twitter的倒计时的post ，它提供了执行此操作的代码。
接下来，我更新了app / views / shared / _micropost_form.html.erb，如下所示：
然后，我在lib中创建了一个javascripts目录并添加了文件
LIB /资产/ JavaScript的/ 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_tree .
例如，这有效但我不确定与树上方的行相比有什么区别。
//= require jquery //= require jquery_ujs //= require bootstrap //= require_tree . //= require microposts
我认为我在SO中发布的解决方案与您的解决方案完全不同，因为我可以谦虚地将其作为答案发布。
您可以使用CoffeeScript简化它：
/app/assets/javascripts/microposts.js.coffee
updateCountdown = - > remaining = 140 - jQuery（“＃micropost_content”）。val（）。length jQuery（“。countdown”）。文本剩余+“剩余字符” jQuery - > updateCountdown（） $（“＃micropost_content”）。更改updateCountdown $（“＃micropost_content”）。keyup updateCountdown
正如jonyamo所提到的，您不需要将application.js作为//= require_tree .来触摸//= require_tree . 已经成功了。
我不知道为什么，但这个解决方案只适用于我使用咖啡脚本。 我尝试用javascript实现它，但它以某种方式没有显示任何内容：倒计时，也没有文本的固定部分“剩余的字符”。
所以这里是我所做的回顾。
第1步：创建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
注意：由于它被放置在app / javascripts文件夹中，我不需要更新application.js文件。
第2步：更新_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 %>
第3步：在custom_css.css.scss文件中实现一些css
/* micropost jQuery countdown */ .countdown { display: inline; padding-left: 10px; color: $grayLight; }
第4步：享受结果并感到高兴这一切都有效:)
我的microposts.js.coffee使用jQuery .css方法根据remaining变量的值更改剩余字符的颜色，以更接近于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
感谢所有回答过的人。
我使用Brett的代码让我通过Rails教程中的练习，虽然我有一个小的改动。 当我导航到另一个页面然后返回主页时，我遇到了从.countdown元素中消失的文本的问题。 通过一些小的研究和另一个答案的帮助，我意识到原因是Turbolinks。 我对Brett的代码的更改，绑定到page:change事件而不是ready ，如下所示。 我希望这有助于其他人。
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(); }); });
这是基于Adriano解决方案的coffeescript版本。 这会忽略空格，不涉及将空div添加到视图中，并且一旦获得减号，也会添加错误类。
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 '140 characters remaining' jQuery('#micropost_content').change updateCountdown jQuery('#micropost_content').keyup updateCountdown return
为了避免字符倒数减去，我将此限制添加到_micropost_form.html.erb partial，因此它会阻止您使用140个字符：
<%= f.text_area :content, maxlength:140, placeholder: "Compose new micropost..." %>