4

完成した Rails チュートリアル アプリをRails Best Practicesで実行すると、"サーバー側で時間を計算するにはコストがかかりすぎる"ため、メソッドを使用しないようにtime_ago_in_wordsという警告が表示されたため、 timeago jQuery プラグインを使用するように実装を変更するサンプル コードが提供されています。 . 面白い変化がありそうだったので、やってみました。使用した元のコードtime_ago_in_wordsは次の 2 か所にあります。

アプリ/ビュー/共有/_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))

timeHTML5タグを使用して、次のように 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)

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 ファイルに追加するだけだと思いました。

アプリ/資産/javascripts/application.js.coffee

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

これはうまくいかなかったので、ステートメントを microposts.js.coffee と users.js.coffee に移動しようとしました有無にかかわらず$(document).ready ->、まだうまくいきませんでした。次に、timeago に必要なライブラリがデフォルトで に含まれていない可能性があると考えたjquery-railsので、それらを追加しました。

アプリ/資産/javascripts/application.js.coffee

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

jquery.min.jsここにand宣言を追加してjquery.timeago.jsもうまくいきませんでした。また、javascript に依存する他のページ要素が無効になったため、構文がオフになっていると想定しています。

したがって、私が理解している限り、haml ファイルの実装コードは正しいと思いますが、わかりません。

  1. どのcoffeescriptファイルに呼び出しを入れる$("time.timeago").timeago()べきか、そして私が持っているものが間違っている場合はどのように書くべきか
  2. timeagoライブラリが rails-jquery に含まれているかどうか
  3. そうでない場合、それらを適切に含める方法

これに多くの時間を費やした後、私はrails-timeago gem を試してみることにしました。これは、いくつかの優れたヘルパーと同様に、適切に表示する時間を得るのに役立ちました。ただし、上記の Railst()メソッドの実装では、時間を言葉で取得して i18n 文字列に補間するだけではうまくいかないようです。

time_ago_in_wordsでは、 Rails 3.2 アプリで i18n を使用して timeago JQuery プラグインを使用することで、どのように望ましい効果を得ることができますか?

4

1 に答える 1

5

rails-timeago gemを使用して、解決策をハックすることができました。最適ではありませんが、希望する timeago 効果が得られるようです。これは非常に優れています。timeago jQuery プラグイン%time.timeagoタグだけを使用して、Rails で同じ効果を得る方法を知りたいです。とにかく、うまくいけば、これは誰かに興味を持っています。

設定

Gemfile

gem 'rails-timeago', '1.3.0'

config/initializers/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 文字列をカスタマイズします。完全を期すために、アプリに必要な 3 つのロケールをjQuery-timeago Github リポジトリから取得し、ディレクトリの下に配置しましたが、実際には ja ロケール ファイルを変更しただけでした。

アプリ/資産/javascripts/application.js.coffee

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

アプリ/ビュー/レイアウト/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

構成/ロケール/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_itemi18n ファイルの文字列は同じです。

(eg )t()の結果を動的に使用する方法が見つからなかったので、結果を接頭辞と接尾辞の間に入れました。timeago は時間関連のプレフィックス/サフィックスを提供しますが、「投稿」に関連するものは提供しないため、上記で追加されました。 と の出力の間のスペースを取り除くために(特に日本語の場合)、これらの 2 つのタグをタグでラップして、タグ内のすべての空白を削除しました。些細なことですが、面倒くさいので入れたかったのですが、キーに値が必要な言語を使っていなければ、特に必要ありません。また、これを行うためのより良い方法があると仮定しています。timeago_tagt('.time_posted_ago', time: timeago_tag(micropost.created_at))
timeago_tagtime_posted_suffix%time<<time_posted_suffix

問題

私はもともとapp/assets/javascripts/localesディレクトリの下にjquery.timeago.en.jsjquery.timeago.it.js、およびjquery.timeago.ja.jsを持っていましたが、en ファイルが見つからないという問題がありました。 en ロケール用に読み込まれます。代わりに、ディレクトリ内のアルファベット順で最後のファイル (ja) が en ロケールで使用されます。そのため、en ファイルの名前をjquery.timeago.xx.jsに変更し、英語を表示できるようにしました。en ファイルを locales ディレクトリの外に移動してみましたが、一向に拾われないようで、xx になりました。

アップデート

私が抱えていた国際化の問題は解決されました。詳細については、この Github の問題を参照してください。要約すると、app/assets/javascripts/localesディレクトリを取り除き、本当にカスタマイズしたかった唯一のファイルであるjquery.timeago.ja.jsだけをlib/assets/javascripts/localesディレクトリの下に置きました。:it:enデフォルトtimeagoの翻訳が使用され、:en期待どおりに翻訳が表示されます。それで、私はrails-timeagogemのこの問題に対する良い解決策と私が考えるものを手に入れました.

更新 2

このソリューションは現在ローカルで機能しますが、アセットのプリコンパイルの問題により、Heroku に正しくデプロイされません...

アップデート 3

ローカルおよび Heroku で動作するように見える構成ソリューションを見つけました。

config/initializers/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

config/environments/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 だけです。

詳細については、関連する Github issueを参照してください。

于 2012-06-21T20:10:58.223 に答える