用i18n-ized Rails 3.2 app中的timeago jQuery插件替换time_ago_in_words

时间：2012-06-20 09:17:38

标签： jquery ruby-on-rails-3 internationalization railstutorial.org timeago

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

应用/视图/共享/ _feed_item.html.haml 

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

应用/视图/微柱/ _micropost.html.haml 

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

我使用HTML5 time标记更改了代码以使用timeago：

应用/视图/共享/ _feed_item.html.haml 

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

应用/视图/微柱/ _micropost.html.haml 

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

我认为，只留下我将timeago（）方法添加到我的coffeescript文件中：

应用/资产/ Javascript角/ application.js.coffee 

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

这不起作用，所以我尝试将声明移至 microposts.js.coffee 和 users.js.coffee ，包含和不包含$(document).ready ->但仍然没有去。然后我想到，jquery-rails默认情况下可能没有包含timeago所需的库，所以我添加了它们：

应用/资产/ Javascript角/ 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文件中的实现代码是正确的，但我只是不知道：

  1. 其中coffeescript文件我应该$("time.timeago").timeago()调用，如果我的内容不正确我应该怎么写
  2. rails {jquery
    3. 中是否包含timeago个库
  3. 如果他们不是，如何正确地包括它们

    4. 花了很多时间在这之后，我最终尝试了rails-timeago宝石，除了有一些好帮手之外，它确实有时间正确显示。但是，它似乎与上面的rails t()方法实现不太匹配，以便只是在单词中获取时间然后将其插入到i18n字符串中。

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

1 个答案:

答案 0 :(得分：5)

我设法使用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语言环境文件。

应用/资产/ Javascript角/ application.js.coffee 

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

应用/视图/布局/ application.html.haml 

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

实施

应用/视图/微柱/ _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

<强>配置/区域设置/ en.yml 

microposts:
  micropost:
    time_posted_prefix: Posted
    time_posted_suffix: ""

<强>配置/区域设置/ it.yml 

microposts:
  micropost:
    time_posted_prefix: Pubblicato
    time_posted_suffix: ""

<强>配置/区域设置/ 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 目录下，但我遇到了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的默认翻译被使用，{{1翻译按预期显示。所以，我确实通过:en gem得到了我认为解决这个问题的好方法。

更新2

此解决方案目前在本地运行，但由于资产预编译问题而无法正确部署到Heroku ......

更新3

找到一个似乎在本地和Heroku上运行的配置解决方案：

<强>配置/初始化/ timeago.rb 

rails-timeago

<强>配置/环境/ production.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

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

更多详情可在related Github issue找到。

相关问题
最新问题