Question

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

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

这超出了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"

Answer 2

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

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

然后在控制器中：

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

Answer 3

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

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

Answer 4

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

您还希望将其作为属性，因此i18n只能使用一次，然后您就可以使用缓存版本。

Templete：

{{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()

});

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

4 个答案: