使用Emblem.js将翻译插入到占位符中

Question

我正在尝试使用ember.js/emblem.js编写一个登录表单。一切正常，除非我像这样尝试I18ning占位符：

Em.TextField valueBinding="view.username" placeholder="#{t 'users.attributes.username}"
Em.TextField valueBinding="view.password" placeholder="#{t 'users.attributes.password'}" type="password"

如果我尝试一下，也会得到同样的响应：

= input value=view.username placeholder="#{t 'users.attributes.username}"
= input value=view.password placeholder="#{t 'users.attributes.password'}" type="password"

在这两种情况下，我都会收到以下错误消息：

Pre compilation failed for: form
. . . .
Compiler said: Error: Emblem syntax error, line 2: Expected BeginStatement or DEDENT but "\uEFEF" found.   Em.TextField valueBinding="view.username" placeholder="#{t 'users.attributes.username}"

我假设发生这种情况是因为我正在尝试从一个已经被编译的语句中编译一些东西。为了证明这一点，如果我将代码改为：

input value=view.username placeholder="#{t 'users.attributes.username}"
input value=view.password placeholder="#{t 'users.attributes.password'}" type="password"

但缺点是值绑定不再起作用，这仍然使表单不可操作。有没有其他我没有考虑过的解决这个问题的方法？

Answer 1

正如Alexander指出的，这是Ember和Handlebar的局限性。我一直使用的变通方法是让placeholder引用一个控制器属性，然后该属性返回翻译后的字符串。例如：

{{input
    type="text"
    value=controller.filterText
    placeholder=controller.filterPlaceholder }}

然后在控制器中：

filterPlaceholder: function () {
    return i18n.t('players.filter');
}.property('model.name'),

Answer 2

这超出了Emblem所能做的范围，因为这是Ember+Handlebars的固有限制。您要做的是使用input帮助程序，并在帮助程序调用中使用另一个帮助程序t来获取placeholder选项的值。你不能(目前)在Ember中做到这一点，所以Emblem不能为你做到这一点。

编辑:您应该尝试使用Ember i18n库。我还没有用过它，但是看起来你想要做的是在Ember.View中混入TranslateableAttributes混入，比如：

Ember.View.reopen(Em.I18n.TranslateableAttributes)

然后在您的徽章模板中，您可以执行以下操作

= input placeholderTranslation="button.add_user.title"

Answer 3

我注意到第一个placeholder="#{t 'users.attributes.username}"中有一个拼写错误。它缺少右单引号。

Emblem syntax error, line 2: Expected BeginStatement or DEDENT but "\uEFEF" found.可能会产生误导。我发现这个错误与所报告的完全不同。例如，没有纯文本|的linkTo会报告类似的错误。