jquery – Micropost字符倒计时(Rails教程,第2版,第10章,练习7)

我在The Rails Tutorial(第10章,练习7)中尝试使用信息 here作为基础并在StackOverflow应答 here和 here的帮助下尝试微博字符倒计时.

在屏幕上,它看起来像this,当你接近字符限制时,文本逐渐变红,一旦微博超过限制,Post按钮禁用,完成like so.

目前的实现如下：

视图/共享/ _micropost_form.html.haml

= form_for @micropost do |f|
  = render 'shared/error_messages',object: f.object
  .field= f.text_area :content,placeholder: t('.compose_micropost')
  %span
    .remaining= t('.characters_remaining').html_safe
    .countdown
  = f.submit t('.post'),class: "btn btn-large btn-priMary"

资产/ Java脚本/ microposts.js.coffee

updateCountdownAttributes = (toRemove,toadd = null) ->
  for attr in toRemove
    $(".remaining,.countdown").removeClass attr
  if toadd
    $(".remaining,.countdown").addClass toadd
    if toadd is "overlimit"
      $("input.btn.btn-large.btn-priMary").attr("disabled","true")
    else
      $("input.btn.btn-large.btn-priMary").removeAttr("disabled")

updateCountdown = ->
  remaining = 140 - $("#micropost_content").val().length
  toRemove = ["nearlimit","almostlimit","overlimit"]
  if remaining > 19
    updateCountdownAttributes(toRemovE)
  if remaining < 20
    toadd = (toRemove.filter (attr) -> attr is "nearlimit").toString()
    updateCountdownAttributes(toRemove,toadd)
  if remaining < 11
    toadd = (toRemove.filter (attr) -> attr is "almostlimit").toString()
    updateCountdownAttributes(toRemove,toadd)
  if remaining < 0
    toadd = (toRemove.filter (attr) -> attr is "overlimit").toString()
    updateCountdownAttributes(toRemove,toadd)
  $(".countdown").text remaining

$(document).ready ->
  $(".countdown").text 140
  $("#micropost_content").change updateCountdown
  $("#micropost_content").keyup updateCountdown
  $("#micropost_content").keydown updateCountdown
  $("#micropost_content").keypress updateCountdown

资产/样式表/ custom.css.scss

...
/* Micropost character countdown */

.remaining,.countdown {
  display: inline;
  color: $grayLight;
  float: right;
}

.overlimit {
  color: $red;
}

.almostlimit {
  color: hsl(360,57%,21%);
}

.nearlimit {
  color: $gray;
}

配置/语言环境/ en.yml

en:
  ...
  shared:
    ...
    micropost_form:
      compose_micropost: "Compose new micropost..."
      post: "Post"
      characters_remaining: " characters remaining."

从这里,我有两个问题/问题：

第一个是,如果可能的话,我希望能够对“剩余字符”字符串进行适当的复数化.也许是这样的：

视图/共享/ _micropost_form.html.haml

...
%span
  .remaining= t('.characters_remaining',count: [[.countdown value]]).html_safe
  .countdown
...

配置/语言环境/ en.yml

...
micropost_form:
  ...
  characters_remaining: 
    one: " character remaining."
    other: " characters remaining."

但是,我不知道如何在.countdown div中检索值,我可以将它传递给count参数.我怎样才能做到这一点？

假设第一个问题可以解决,我也想摆脱减号字符,而是将“-2个字符剩余”改为“2个字符以上”.也许在视图中使用某种分支逻辑和一些javascript将负数更改为正数…？我在这里不太确定,所以任何帮助都会受到赞赏.

视图/共享/ _micropost_form.html.haml

...
%span
  - [[ if .countdown value < 0 ]]
    .remaining= t('.characters_over',count: [[positive .countdown value]]).html_safe
  - [[ else ]]
    .remaining= t('.characters_remaining',count: [[.countdown value]]).html_safe
  .countdown
...

配置/语言环境/ en.yml

...
micropost_form:
  ...
  characters_remaining: 
    one: " character remaining."
    other: " characters remaining."
  characters_over: 
    one: " character over."
    other: " characters over."

function updateCountdown() {
  // 140 characters max
  var left = 140 - jQuery('.micropost_text_area').val().length;
  if(left == 1) {
    var charactersLeft = ' character left.'
  }
  else if(left < 0){
    var charactersLeft = ' characters too many.'
  }
  else{
    var charactersLeft = ' characters left.'
  }
  jQuery('.countdown').text(Math.abs(left) + charactersLeft);
}

jQuery(document).ready(function($) {
  updateCountdown();
  $('.micropost_text_area').change(updateCountdown);
  $('.micropost_text_area').keyup(updateCountdown);
});

<script src="app/assets/javascripts/character_countdown.js"></script>
<%= form_for(@micropost) do |f| %>
  <%= render 'shared/error_messages',object: f.object %>