Translating app with i18next

Question

I'm translating my app using i18next, but it only translated part of the app.

In my app, I use coffeescript with extension Craftyjs, and while some things as the buttons and some text have translated, other haven't.

One example of what didn't translate will be:

btnLearn.replace '<div id="learn-mode" class="learw">#{__("LEARN HERE")}</div>'

But this did translate well:

btnWrapper.replace """
  <div class="btn-golden" id="teach"><i class="btn-goldenw"></i><span class="btn-goldenw-body">#{__("&nbsp;TEACH HERE&nbsp;")}</span><i class="btn-goldenw-right"></i></div>
"""

Any ideas what can I do to get the translation correctly done?

Answer 1

I suspect that the problem is that the __("LEARN HERE") inside:

'<div id="learn-mode" class="learw">#{__("LEARN HERE")}</div>'

is not a function call, it is just a literal string. From the fine manual:

String Interpolation, Block Strings, and Block Comments

Ruby-style string interpolation is included in CoffeeScript. Double-quoted strings allow for interpolated values, using #{ ... }, and single-quoted strings are literal.

So #{...} does not do string interpolation inside single quoted strings and the I18N tools will need see the __("LEARN HERE") call. Change your quotes to allow string interpolation and things should work better:

btnLearn.replace "<div id=\"learn-mode\" class=\"learw\">#{__("LEARN HERE")}</div>"
btnLearn.replace "<div id='learn-mode' class='learw'>#{__("LEARN HERE")}</div>"
#...