标签的Ember i18n动态文本（使用占位符）

Question

我目前正在使用ember的i18n库翻译应用程序。

通过使用占位符，我可以翻译标签的文本，但是，如果给定的文本是字符串，则只能将标签传递给占位符。

我们使用的标签是普通的i18n标签：

example_tag : 'ejemplo'

我们现在拥有的占位符的方法如下所示：

TranslationsPlaceHolder: (->{ 
    return Ember.I18n.t('example_tag');
})

我们称之为的方式是这样的：

{{input value=view.example placeholder=view.TranslationsPlaceholder}}

我目前正在寻找一种方法，可以使用一个带有动态标签的占位符来分配不同的标签，因此我们可以将要转换的标签作为参数传递，而只能使用一个带有不同标签的占位符。

我们正在使用来自以下问题的参考： 使用Emblem.js将翻译插入占位符

非常感谢！

Answer 1

您是否有可能重构代码以使用本机<input>而不是通过一种方法绑定？ 这是一个旋转手势 ，向您展示我的意思。

<input value={{inputValue}} oninput={{action (mut inputValue) value="target.value"}} placeholder={{translate "placeholder"}} />

在哪里translate是一个助手：

const translations = {
  placeholder: "Type here"
};
export function translate(params/*, hash*/) {
  return translations[params] || `${params}_NOT_FOUND`;
}

export default Ember.Helper.helper(translate);

如果您是Ember 2.3.1，则可以安全地切换到本机<input> 。

如果您还不够用（这是我唯一建议您执行的操作，而不是单方法绑定），则可以在{{input}}周围提供自己的无标签组件包装，该包装使用占位符，并通过计算的属性进行翻译。 参见这个旋转例子。

您的输入将变为：

{{translated-placeholder-input value=value placeholderKey="placeholder"}}

其中translated-placeholder是无标签组件：

import Ember from 'ember';
const translations = {
  placeholder: "Type here..."
};
export default Ember.Component.extend({
  //creates the component without an enclosing div
  tagName: "",
  translatedPlaceholder: Ember.computed('placeholderKey', function(){
    let key = this.get('placeholderKey');
    if(!key){
      return ""; 
    }
    return translations[key] || `${key}_NOT_FOUND`;
  })
});

这只是input传递

{{input value=value placeholder=translatedPlaceholder}}

这种方法的缺点（除了2种方式附带的所有方法外）是必须将绑定到组件的任何属性显式传递给{{input}}