Micropost字符倒计时（Rails Tutorial，2nd Ed，第10章，练习7） [英] Micropost character countdown (Rails Tutorial, 2nd Ed, Chapter 10, Exercise 7)

查看：281
本文介绍了Micropost字符倒计时（Rails Tutorial，2nd Ed，第10章，练习7）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用这里信息尝试了The Rails教程中的微博字符倒计时（第10章，练习7） >作为基础，并从StackOverflow的一些帮助解答此处和这里。



在屏幕上，它看起来像此，并且当您更接近字符限制时，文本逐渐变红，一旦微博超过，Post按钮将禁用，完成这样。



当前实现类似：



views / shared / _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 
。剩余= t（'。characters_remaining'）。html_safe 
 .countdown 
 = f.submit t（'。post'），class：btn btn-large btn-primary

assets / javascripts / microposts.js.coffee 

  updateCountdownAttributes =（toRemove，toAdd = null） - > 
为attr在toRemove 
 $（。remaining，.countdown）。removeClass attr 
 if toAdd 
 $（。remaining，.countdown）。addClass toAdd 
 if toAdd isoverlimit
 $（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] 
如果剩余> 19 
 updateCountdownAttributes（toRemove）
如果剩余< 20 
 toAdd =（toRemove.filter（attr） - > attr是nearlimit）toString（）
 updateCountdownAttributes（toRemove，toAdd）
如果剩余< 11 
 toAdd =（toRemove.filter（attr） - > attr是almostlimit）toString（）
 updateCountdownAttributes（toRemove，toAdd）
如果剩余< 0 
 toAdd =（toRemove.filter（attr） - > attr isoverlimit）。toString（）
 updateCountdownAttributes（toRemove，toAdd）
 $（countdown）。text剩余
 
 $（document）.ready  - > 
 $（countdown）。text 140 
 $（＃micropost_content）。change updateCountdown 
 $（＃micropost_content）。keyup updateCountdown 
 $（ micropost_content）。keydown updateCountdown 
 $（＃micropost_content）。keypress updateCountdown

strong> assets / stylesheets / custom.css.scss 

  ... 
 / * Micropost字符倒计时* / 
 
 .remaining，.countdown {
 display：inline; 
 color：$ grayLight; 
 float：right; 
} 
 
 .overlimit {
 color：$ red; 
} 
 
 .almostlimit {
 color：hsl（360，57％，21％）; 
} 
 
 .nearlimit {
 color：$ grey; 
}

config / locales / en.yml p> 

  en：
 ... 
共享：
 ... 
 micropost_form： 
 compose_micropost：Compose new micropost ...
 post：Post
 characters_remaining：& nbsp; characters remaining。





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



第一个是，如果可能，我想要能够对剩余字符字符串进行适当的复数。可能类似：



views / shared / _micropost_form.html.haml 

  ... 
％span 
 .remaining = t（'。characters_remaining'，count：[[.countdown value]]）。html_safe 
 .countdown 
 ...

config / locales / en.yml 

  ... 
 micropost_form：
 ... 
 characters_remaining：
一个：& nbsp;剩余字符。 
 other：& nbsp;字符剩余。

但是，我不知道如何检索中的值。倒计数 div，我可以将它传递给 count 参数。我如何做到这一点？



假设第一个问题可以解决，我也想摆脱减号的字符，而是改变-2字符剩余到2个字符以上。也许使用某种分支逻辑在视图和一些javascript将负数更改为正数...？



views / shared / _micropost_form.html.haml 

  ... 
％span 
  -  [[if .countdown value< 0]] 
 .remaining = t（'。characters_over'，
 count：[[positive .countdown value]]）html_safe 
  -  [[else]] 
。 = t（'。characters_remaining'，count：[[.countdown value]]）。html_safe 
 .countdown 
 ...

config / locales / en.yml 

  ... 
 micropost_form：
 ... 
 characters_remaining：
 one：& nbsp;字符剩余。 
 other：& nbsp;字符剩余。 
 characters_over：
 one：& nbsp; character over。 
 other：& nbsp; characters over。


解决方案

复数和摆脱所有地区的减号），我认为是很好，所以我会在这里详细解释，希望有人会发现它有用。



如果您想深入了解详细信息，请查看它的外观，您可以在我的示例中试用在Heroku上部署应用。



配置



此解决方案使用 i18n-js gem，这是一个小库，提供Rails I18n翻译的Javascript。这颗宝石是伟大的，但不幸的是，我不喜欢与Heroku不错，和 don似乎会在可预见的未来。因此，需要更改以下配置：



config / application.rb 

 ＃... 
 config.assets.initialize_on_precompile = true


b $ b

这意味着在每次部署到Heroku之前，需要运行 rake assets：precompile ，一旦确认成功部署，运行 rake assets：clean 开始再次开发资产。如果这太烦人了，你需要另一个解决方案。


更新：



code> user-env-compile 在您的Heroku环境中，您可以获得Heroku预编译您的资产，并仍然使用i18n-js gem。有关如何执行此操作的说明，请参阅此处，我认为这是值得做的




解决方案



Gemfile 



 ＃... 
 gem'i18n-js' 2'

app / assets / javascripts / application.js > 

  // ... 
 // = require i18n 
 // = require i18n / translations

由于上述Heroku设置，此时我需要运行

  $ rake i18n：js：setup

将 复制i18n-js.yml复制到 config 文件夹中。



app / views / layouts / application.html.haml 

 ％html 
％head 
＃... 
 = i18n_js'

app / views / layouts / _i18n_js.html.haml / p> 

 ：javascript 
 I18n.defaultLocale =＃{I18n.default_locale}; 
 I18n.locale =＃{I18n.locale};

app / views / shared / _micropost_form.html.haml 

 ＃... 
 .field = f.text_area：content，placeholder：t（'。compose_micropost'）
％span.countdown 
 = f.submit t（'。post'），class：btn btn-large btn-primary
   
 
  app / assets / stylesheets / custom.css.scss  
  / * Micropost character倒计时* / 
 
 .countdown {
 display：inline; 
 color：$ grayLight; 
 float：right; 
} 
 // ... 
  
  javascripts / microposts.js.coffee  
 
（我对JavaScript / coffeescript不太好，所以这里有改进/重构的余地）
  updateCountdownString =（remaining） - > 
如果剩余> 1或剩余的是0 
 $（。countdown）。text I18n.t（'shared.micropost_form.characters_remaining.other'，
 count：remaining）
 else if else is 1 
 $（。countdown）。text I18n.t（'shared.micropost_form.characters_remaining.one'，
 count：remaining）
 else如果剩余的是-1 
 $ .countdown）。text I18n.t（'shared.micropost_form.characters_over.one'，
 count：-remaining）
 else 
 $（countdown）。 t（'shared.micropost_form.characters_over.other'，
 count：-remaining）
 
 takeFromCollection =（collection，className） - > 
（collection.filter（attr） - > attr is className）.toString（）
 
 updateCountdownAttributes =（remaining） - > 
 toRemove = [nearlimit，almostlimit，overlimit] 
如果剩余< 20 
 toAdd = takeFromCollection（toRemove，nearlimit）
如果剩余< 11 
 toAdd = takeFromCollection（toRemove，almostlimit）
如果剩余< 0 
 toAdd = takeFromCollection（toRemove，overlimit）
 
如果toAdd isnt null 
为attr在toRemove 
 $（countdown）。removeClass attr 
 $（。countdown）。addClass toAdd 
如果toAdd是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 
 updateCountdownString（remaining）
 updateCountdownAttributes（remaining）
 
 $（document）。准备 - > 
 $（。countdown）。text I18n.t（'shared.micropost_form.characters_remaining.other'，
 count：140）
 $（＃micropost_content）。on 
  
  config / locales / en.yml （其他区域设置具有相同样式的相同键）
 共享：
＃ ... 
 micropost_form：
 characters_remaining：
 one：％{count}个字符。 
 other：剩余％{count}个字符。 
 characters_over：
 one：％{count}个字符超过限制。 
 other：％{count}个字符超过限制。 
  
 
I attempted the micropost character countdown in The Rails Tutorial (Chapter 10, Exercise 7) using the information here as a base and with some help from StackOverflow answers here and here.



On screen, it looks like this, and as you get closer to the character limit, the text gradually turns redder, and once the micropost is overlimit, the Post button disables, finishing like so.



The current implementation looks like:



views/shared/_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"

assets/javascripts/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

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

config/locales/en.yml
en:
  ...
  shared:
    ...
    micropost_form:
      compose_micropost: "Compose new micropost..."
      post: "Post"
      characters_remaining: "&nbsp;characters remaining."







From here, I have two questions/problems:



The first is, if possible, I want to be able to do proper pluralization of the "characters remaining" string.  Perhaps something like:



views/shared/_micropost_form.html.haml
...
%span
  .remaining= t('.characters_remaining', count: [[.countdown value]]).html_safe
  .countdown
...

config/locales/en.yml
...
micropost_form:
  ...
  characters_remaining: 
    one: "&nbsp;character remaining."
    other: "&nbsp;characters remaining."

However, I don't know how to retrieve the value within the .countdown div in a way that I can pass it over to the count parameter.  How can I do this?



Assuming the first problem can be solved, I also want to get rid of the minus number of characters and instead change "-2 characters remaining" to "2 characters over".  Perhaps using some kind of branching logic in the view and some javascript to change the negative number to a positive number...?  I'm not really sure here, so any help would be appreciated.



views/shared/_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
...

config/locales/en.yml
...
micropost_form:
  ...
  characters_remaining: 
    one: "&nbsp;character remaining."
    other: "&nbsp;characters remaining."
  characters_over: 
    one: "&nbsp;character over."
    other: "&nbsp;characters over."



 解决方案 
I've found a solution to both my questions (pluralization and getting rid of the minus numbers in all locales) that I think is pretty good, so I'll explain it in detail here and hopefully someone will find it useful.



If you want to see what it looks like before delving into the details, you can try it out for yourself at my Sample App deployment at Heroku.



Config



This solution uses the i18n-js gem, which is "a small library to provide the Rails I18n translations on the Javascript."  The gem is great, but unfortunately doesn't play nice with Heroku as I would like, and doesn't seem like it will for the foreseeable future.  So, the following configurations will need to be changed:



config/application.rb
# ...
config.assets.initialize_on_precompile = true

This means that before every deploy to Heroku, rake assets:precompile will need to be run, and once you've confirmed a successful deployment, run rake assets:clean to begin developing assets again.  If this is too annoying, you'll need another solution.  

  
Update: 

  
  
If you enable user-env-compile in your Heroku environment, you can get Heroku to precompile your assets and still use the i18n-js gem.  Instructions on how to do so are here, and I think it's worth doing for as long as Heroku will support the functionality.





The solution



Gemfile
# ...
gem 'i18n-js', '2.1.2'

app/assets/javascripts/application.js
// ...
//= require i18n
//= require i18n/translations

Due to the Heroku settings above, at this point I needed to run 
$ rake i18n:js:setup

to copy i18n-js.yml to the config folder.



app/views/layouts/application.html.haml
%html
  %head
    # ...
    = render 'layouts/i18n_js'

app/views/layouts/_i18n_js.html.haml
:javascript
  I18n.defaultLocale = "#{I18n.default_locale}";
  I18n.locale = "#{I18n.locale}";

app/views/shared/_micropost_form.html.haml
# ...
.field= f.text_area :content, placeholder: t('.compose_micropost')
%span.countdown
= f.submit t('.post'), class: "btn btn-large btn-primary"

app/assets/stylesheets/custom.css.scss
/* Micropost character countdown */

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

app/assets/javascripts/microposts.js.coffee 

(I'm not that good with javascript/coffeescript, so there's likely room for improvement/refactoring here)
updateCountdownString = (remaining) ->
  if remaining > 1 or remaining is 0
  $(".countdown").text I18n.t('shared.micropost_form.characters_remaining.other',
                              count: remaining)
  else if remaining is 1
    $(".countdown").text I18n.t('shared.micropost_form.characters_remaining.one',
                                count: remaining)
  else if remaining is -1
    $(".countdown").text I18n.t('shared.micropost_form.characters_over.one',
                                count: -remaining)
  else
    $(".countdown").text I18n.t('shared.micropost_form.characters_over.other',
                                count: -remaining)

takeFromCollection = (collection, className) ->
  (collection.filter (attr) -> attr is className).toString()

updateCountdownAttributes = (remaining) ->
  toRemove = ["nearlimit", "almostlimit", "overlimit"]
  if remaining < 20
    toAdd = takeFromCollection(toRemove, "nearlimit")
  if remaining < 11
    toAdd = takeFromCollection(toRemove, "almostlimit")
  if remaining < 0
    toAdd = takeFromCollection(toRemove, "overlimit")

  if toAdd isnt null
    for attr in toRemove
      $(".countdown").removeClass attr
    $(".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
  updateCountdownString(remaining)
  updateCountdownAttributes(remaining)

$(document).ready ->
  $(".countdown").text I18n.t('shared.micropost_form.characters_remaining.other',
                              count: 140)
  $("#micropost_content").on("change keyup keydown keypress paste drop",
                             updateCountdown)

config/locales/en.yml (other locales have the same keys in the same style)
shared:
  # ...
  micropost_form:
    characters_remaining:
      one: "%{count} character remaining."
      other: "%{count} characters remaining."
    characters_over:
      one: "%{count} character over limit."
      other: "%{count} characters over limit."



                        
这篇关于Micropost字符倒计时（Rails Tutorial，2nd Ed，第10章，练习7）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
其他开发语言最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆