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动态文本（使用占位符）

1 个答案: