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

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

应用程序/views/shared/_feed_item.html.haml

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

应用程序/views/microposts/_micropost.html.haml

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

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

应用程序/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)

应用程序/views/microposts/_micropost.html.haml

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

我想，这只是让我将 timeago() 方法添加到我的咖啡脚本文件中:

app/assets/javascripts/application.js.coffee

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

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

app/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 文件中的实现代码是正确的，但我不知道:

我应该将 $("time.timeago").timeago() 调用放在哪个咖啡脚本文件中，以及如果我拥有的不正确，我应该如何编写它

rails-jquery 中是否包含 timeago 库

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

在花了很多时间之后，我最终尝试了 rails-timeago gem，它以及一些不错的助手，确实可以让时间正确显示。然而，它似乎不能很好地与上面的 rails t() 方法实现一起使用，以便只获取单词中的时间，然后将其插入到 i18n 字符串中。

那么，如何在带有 i18n 的 Rails 3.2 应用程序中使用 timeago JQuery 插件获得 time_ago_in_words 的预期效果？

最佳答案

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

设置

Gemfile

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]

创建 app/assets/javascripts/locales 目录以对 timeago i18n 字符串进行自定义。为了完整起见，我从 jQuery-timeago Github repository 中获取了我的应用程序所需的三个语言环境并将它们放在目录下，但实际上最终只更改了 ja 语言环境文件。

app/assets/javascripts/application.js.coffee

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

app/views/layouts/application.html.haml

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

执行

应用程序/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 。

国际化

配置/locales/en.yml

microposts:
  micropost:
    time_posted_prefix: Posted
    time_posted_suffix: ""

配置/locales/it.yml

microposts:
  micropost:
    time_posted_prefix: Pubblicato
    time_posted_suffix: ""

配置/locales/ja.yml

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

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

我找不到根据 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 键中的值的语言，这绝不是必要的。我还假设有更好的方法来做到这一点。

问题

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

更新

我遇到的 i18n 问题现在已经解决了。有关详细信息，请参阅 this Github issue。总之，我摆脱了我的 app/assets/javascripts/locales 目录，只将 jquery.timeago.ja.js 放在 lib/assets/javascripts/locales 下，这是我真正想自定义的唯一文件 目录，这意味着对于 :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

配置/环境/production.rb

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

而且，在这种情况下，唯一需要的自定义文件是 app/assets/javascripts/timeago/jquery.timeago.ja.js

更多细节可以在 related Github issue 找到。

关于jquery - 在 i18n 化的 Rails 3.2 应用程序中用 timeago jQuery 插件替换 time_ago_in_words，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11116372/