在一些帮助下,我提出了以下与 ember-i18n 和 ember 1.11 或更高版本一起使用的组件。
它可能会进一步优化,但它的工作方式又好又快。
创建一个新组件
ember g component t-t
模板.hbs
{{#each parts as |part|}}
{{#if part.isComponent}}
{{component part.content}}
{{else}}
{{part.content}}
{{/if}}
{{/each}}
组件.js
import Ember from 'ember';
const { $ } = Ember;
export default Ember.Component.extend({
tagName: 'span',
updateComponents: Ember.on('didReceiveAttrs',function(opts){
let newAttrs = opts.newAttrs;
let components = {};
$.each(newAttrs,(key,val)=>{
if( key !== 't' && typeof val === 'object' ){
let keys = Object.keys(val);
if(keys.length && keys[0].indexOf('COMPONENT_')>=0){
components[key] = val;
}
}
});
this.set('_components',components);
}),
parts: Ember.computed('_components','t','i18n.locale',function(){
let attrs = [];
let components = this.get('_components');
let componentKeys = Object.keys(components);
$.each(this.attrs,(key,val)=>{
if( key !== 't'){
if( componentKeys.indexOf(key)<0 ){
attrs[key] = val;
} else {
attrs[key] = `{{${key}}}`;
}
}
});
let content = this.get('i18n').t(this.get('t'),attrs).toString();
content = content.replace(/\{\{(\w+?)\}\}/g,(fullMatch)=>{
return `{{split}}${fullMatch}{{split}}`;
});
let parts = content.split('{{split}}');
parts.forEach((val,i)=>{
let isComponent;
let key = val.replace(/\{\{(\w+?)\}\}/g,(fullMatch,key)=>{
isComponent = true;
return key;
});
if(isComponent && components[key]){
parts[i] = {
isComponent: true,
content: components[key]
};
} else {
parts[i] = {
content: Ember.String.htmlSafe(val)
};
}
});
return parts;
}),
}).reopenClass({
positionalParams: ['t']
});
用法
{{t-t
'your-ember-i18n-path'
key1='Normal Content (example)'
key2=(component 'your-component') }}