jquery - 在 i18n 化的 Rails 3.2 应用程序中用 timeago jQuery 插件替换 time_ago_in_words

Question

通过 Rails Best Practices 运行我完成的 Rails 教程应用程序给我一个警告 not use the time_ago_in_words method因为“在服务器端计算时间太贵了”，所以他们提供了一些示例代码来更改您的实现以使用 timeago jQuery plugin .听起来它会做出有趣的改变，所以我尝试了一下。我使用 time_ago_in_words 的原始代码在两个地方:

app/views/shared/_feed_item.html.haml

# ...
%span.timestamp
  = t('.time_posted_ago', time: time_ago_in_words(feed_item.created_at) )

app/views/microposts/_micropost.html.haml

# ...
%span.timestamp
  = t('.time_posted_ago', time: time_ago_in_words(micropost.created_at))

我将代码更改为使用 timeago，如下所示，使用 HTML5 time标签:

app/views/shared/_feed_item.html.haml

# ...
%time.timeago{ datetime: feed_item.created_at.getutc.iso8601 }
  = t('.time_posted_ago', time: feed_item.created_at.to_s)

app/views/microposts/_micropost.html.haml

# ...
%time.timeago{ datetime: micropost.created_at.getutc.iso8601 }
  = t('.time_posted_ago', time: micropost.created_at.to_s)

我想，我只需要将 timeago() 方法添加到我的 CoffeeScript 文件中:

应用程序/ Assets /javascripts/application.js.coffee

$(document).ready ->
  $("time.timeago").timeago()

这不起作用，所以我尝试将语句移动到 microposts.js.coffee 和 users.js.coffee , 有无 $(document).ready ->还是不行。然后我想也许 timeago 所需的库默认情况下不包含在 jquery-rails 中。 ，所以我添加了它们:

应用程序/ Assets /javascripts/application.js.coffee

//= require jquery
//= require jquery_ujs
//= require jquery.min
//= require jquery.timeago
//= require bootstrap
//= require_tree .

添加 jquery.min.js和 jquery.timeago.js此处的声明不起作用，而且我还假设我的语法已关闭，因为它们破坏了我依赖于 javascript 的其他页面元素。

因此，据我了解，我认为我的 haml 文件中的实现代码是正确的，但我只是不知道:

我应该在哪个 CoffeeScript 文件中放置 $("time.timeago").timeago()如果我的内容不正确，我应该怎么写

是否timeago库包含在 rails-jquery

如果不是，如何正确包含它们

在这上面花了很多时间之后，我最终尝试了 rails-timeago gem，除了有一些很好的助手外，确实可以让时间正确显示。但是，它似乎不能很好地与导轨 t()上面的方法实现，以便仅以单词形式获取时间，然后将其插入到 i18n 字符串中。

那么，怎样才能得到想要的 time_ago_in_words的效果呢？在带有 i18n 的 Rails 3.2 应用程序中使用 timeago JQuery 插件？

Answer 1

我设法使用 rails-timeago gem 破解了一个解决方案.这不是最优的，但它似乎得到了想要的 timeago 效果，这非常好。我想知道如何只使用 timeago jQuery plugin 在 Rails 中获得相同的效果和 %time.timeago标签。无论如何，希望这对某人感兴趣。

设置

gem 文件

gem 'rails-timeago', '1.3.0'

配置/初始化程序/timeago.rb

Rails::Timeago.default_options limit: proc { 20.days.ago }, nojs: true
Rails::Timeago.locales = [:en, :it, :ja]

创建 应用程序/ Assets /javascripts/语言环境将自定义设置到 timeago i18n 字符串的目录。为了完整起见，我从 jQuery-timeago Github repository 中获取了我想要的应用程序的三个语言环境。并将它们放在目录下，但实际上只是最终更改了 ja 语言环境文件。

应用程序/ Assets /javascripts/application.js.coffee

# ...
//= require jquery
//= require jquery_ujs
//= require rails-timeago

应用程序/ View /布局/application.html.haml

# ...
%head
  # ...
  = javascript_include_tag "application"
  = timeago_script_tag

执行

app/views/microposts/_micropost.html.haml

# ...
%span.timestamp
  = t('.time_posted_prefix')
  %time<
    = timeago_tag(micropost.created_at)
    = t('.time_posted_suffix')

的代码app/views/shared/_feed_item.html.haml 是一样的:替换掉 micropost对于 feed_item .

i18n

config/locales/en.yml

microposts:
  micropost:
    time_posted_prefix: Posted
    time_posted_suffix: ""

配置/语言环境/it.yml

microposts:
  micropost:
    time_posted_prefix: Pubblicato
    time_posted_suffix: ""

config/locales/ja.yml

microposts:
  micropost:
    time_posted_prefix: ""
    time_posted_suffix: に投稿された。

shared.feed_item 的字符串在 i18n 文件中是相同的。

我找不到使用 t() 的方法动态地使用 timeago_tag 的结果(例如 t('.time_posted_ago', time: timeago_tag(micropost.created_at)) )，所以我将结果放在前缀和后缀之间。 timeago 提供了与时间相关的前缀/后缀，但不提供与“发布”相关的前缀/后缀，因此在上面添加了它们。
为了摆脱 timeago_tag的输出之间的空间和 time_posted_suffix (专门针对日语)，我将这两个标签包裹在 %time< 中带有 < 的标签至 remove all whitespace within the tag .这是一件小事，但对我来说很烦人，所以我想把它放进去，但如果你不使用需要 time_posted_suffix 中的值的语言，这绝不是必要的。 key 。我还假设有更好的方法来做到这一点。

问题

我原来有 jquery.timeago.en.js , jquery.timeago.it.js , 和 jquery.timeago.ja.js 下 应用程序/ Assets /javascripts/语言环境目录，但我遇到了一个问题，即没有为 en 语言环境加载 en 文件；相反，目录中按字母顺序排列的最后一个文件 ja 将与 en 语言环境一起使用。因此，我将 en 文件重命名为 jquery.timeago.xx.js , 显示英文。我尝试将 en 文件移到 locales 目录之外，但它似乎从未被拾取，所以它变成了 xx。

更新

我遇到的 i18n 问题现在已经解决了。见 this Github issue详情。总之，我摆脱了我的 应用程序/ Assets /javascripts/语言环境目录并只放 jquery.timeago.ja.js ，我真正想要自定义的唯一文件，位于 下库/ Assets /javascripts/语言环境目录，这意味着对于 :it和 :en语言环境， timeago的默认翻译被使用， :en翻译按预期显示。所以，我确实得到了我认为解决这个问题的好方法 rails-timeago gem 。

更新 2

此解决方案目前在本地工作，但由于 Assets 预编译问题无法正确部署到 Heroku...

更新 3

找到了一个似乎可以在本地和 Heroku 中使用的配置解决方案:

配置/初始化程序/timeago.rb

Rails::Timeago.default_options limit: proc { 20.days.ago }, nojs: true
Rails::Timeago.locales = [:en, :it, :ja]
Rails::Timeago.map_locale "en", "jquery.timeago.js"  # default
Rails::Timeago.map_locale "it", "locales/jquery.timeago.it.js"  # default
Rails::Timeago.map_locale "ja", "timeago/jquery.timeago.ja.js"  # customized

配置/环境/生产.rb

# ...
config.assets.precompile += %w( jquery.timeago.js locales/jquery.timeago.it.js timeago/jquery.timeago.ja.js )

而且，在这种情况下，唯一需要的自定义文件是 应用程序/ Assets /javascripts/timeago/jquery.timeago.ja.js

更多详情请访问 related Github issue .