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

Question

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

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

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

example_tag : 'ejemplo'

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

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

我们的称呼是这样的：

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

我目前正在寻找一种方法，我们可以使用一个带有动态标签的占位符来分配不同的标签，这样我们就可以将要翻译的标签作为参数传递，并且只使用一个带有不同标签的占位符。

我们正在使用这个问题的参考：Inserting a translation into a placeholder with Emblem.js

非常感谢！

Answer 1

您是否有机会重构代码以使用本机 <input> 而不是单向绑定？这是一个 twiddle 向您展示我的意思。

<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}} 提供自己的无标签组件包装器获取占位符的键并通过计算属性进行转换。有关示例，请参阅 this twiddle。

您的输入变为：

{{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}}

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

Ember i18n Dynamic Text for a Tag (Using Placeholder)

javascript

tags

placeholder

internationalization

ember.js