使用 Emblem.js 将翻译插入占位符答案

【问题标题】：Inserting a translation into a placeholder with Emblem.js使用 Emblem.js 将翻译插入占位符
【发布时间】：2015-05-02 14:58:14
【问题描述】：

我正在尝试使用 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"

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

【问题讨论】：

标签： internationalization ember.js emblem.js

【解决方案1】：

正如 Alexander 指出的，这是 Ember 和 Handlebars 的限制。我一直在使用的解决方法是让placeholder 引用控制器属性，然后返回翻译后的字符串。例如：

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

然后在控制器中：

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

【讨论】：

太棒了。比我一直使用的解决方案优雅得多。
控制器并不是添加这些东西的好地方。您应该为此创建一个视图。

【解决方案2】：

这超出了 Emblem 可以做的范围，因为它是 Ember+Handlebars 的固有限制。您要做的是使用 input 助手，并在助手调用中使用另一个助手 t 来获取 placeholder 选项的值。您（目前）无法在 Ember 中执行此操作，因此 Emblem 无法为您执行此操作。

编辑：您应该尝试Ember i18n 库。我还没有使用它，但看起来你想要做的是将 TranslateableAttributes mixin 混合到 Ember.View 中，例如：

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

然后在您的标志模板中，您可以执行类似

的操作

= input placeholderTranslation="button.add_user.title"

【讨论】：

感谢您的澄清。现在我将对占位符进行硬编码，并希望 ember 团队实现一种嵌套助手的方法。
我添加了一些你可以用来回答的替代方案。

【解决方案3】：

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

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

【讨论】：

中肯的建议。我是 ember.js 的新手，从长远来看，这样的指针会有很大帮助。不幸的是，目前该错误似乎仍然与占位符有关。当我删除该代码时，页面呈现良好。有了它，我得到了错误。即使我添加了右引号，这种情况也会继续。
不确定我还能建议什么。尝试在repo 添加问题，@machty 可能会提供帮助。

【解决方案4】：

您应该使用视图来格式化事物并将它们放入模板中。控制器并不意味着知道模板上发生了什么。

您还希望它是一个属性，因此 i18n 将只工作一次，然后您就可以使用缓存版本。

寺庙：

{{input value=view.username placeholder=view.usernamePlaceholder}}
{{input value=view.password placeholder=view.passwordPlaceholder type="password"}}

查看：

export default Ember.View.extend({

  usernamePlaceholder: function() { 
    return Ember.I18n.t('users.attributes.username');
  }.property(),

  passwordPlaceholder: function() { 
    return Ember.I18n.t('users.attributes.password');
  }.property()

});

【讨论】：