将JavaScript显示添加到主页以从140个字符开始倒计时。 （Rails教程，第2版，第10章，练习7）

Question

这项练习有点棘手。想我会发布我的解决方案，看看有没有人做过不同的事情，或者是否有人知道更好的方式。

我不确定使用Asset Pipline的最佳实践..例如，将内容放入application.js清单文件中的正确顺序，或何时将内容放入lib与app中。我只是在lib中添加以下内容以尝试使其工作。

---

来自Michael Hartl's Rails Tutorial 2nd ed 第10章，练习7：

（具有挑战性）将JavaScript显示添加到主页，从140个字符开始倒计时。

首先，我读了这个post about jQuery Twitter-like countdowns，它提供了执行此操作的代码。

接下来，我更新了app / 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 %>

然后，我在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 jquery
 //= require jquery_ujs
 //= require bootstrap
 //= require_tree .
 //= require microposts

Answer 1

我认为my solution posted here in SO与你的不同，因为我可以谦虚地将其作为答案发布。

Answer 2

您可以使用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

正如jonyamo所提到的，你不需要触及 application.js ，因为//= require_tree .已经成功了。

Answer 3

我不知道为什么，但这个解决方案只适用于我使用咖啡脚本。 我尝试用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 partial：

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

第3步：在custom_css.css.scss文件中实现一点css

/* micropost jQuery countdown */

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

第4步：享受结果，并感到高兴，这一切都有效：）

Answer 4

我的microposts.js.coffee使用jQuery .css method根据变量remaining的值更改剩余字符的颜色，以更接近地反映twitter <的行为/ p>

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

感谢所有回答过的人。

Answer 5

我使用Brett的代码让我通过Rails教程中的练习，虽然我有一个小的改动。当我导航到另一个页面然后回到Home时，我的文本从.countdown元素中消失了。通过一些小的研究和help from another answer on SO我意识到原因是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();
  });
});

Answer 6

这是基于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 '<span class="countdown">140 characters remaining</span>'
  jQuery('#micropost_content').change updateCountdown
  jQuery('#micropost_content').keyup updateCountdown
  return

Answer 7

为了避免字符倒数减去，我将此限制添加到_micropost_form.html.erb partial，因此它会阻止您的140个字符：

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