動態渲染Ember中的組件ember-i18n

首先，在這種情況下，ember的組件助手不起作用。如果我知道我需要呈現多少組件，並且按照什麼順序，這隻會有所幫助。動態渲染Ember中的組件ember-i18n

我需要根據像一個字符串，能夠使組件：
{{user}} has made a bid of {{bid}}，其中：

{{user}}和{{bid}}將與部件進行更換。
給定的字符串是未知的，具有未知數量的表示組件的動態節（組件將使用給定的字符串傳入）。

如果這些動態部分是助手，這很容易 - 但助手不會爲我的遊戲中的某些項目削減它。

理想的情況下，我可以做這樣的事情：

{{translated-content 
    content='{{user}} has made a bid of {{bid}}' 
    user=(component 'user-ui') 
    bid=(component 'bid-ui') }}

這是可能的灰燼？

來源

2016-04-21 JeremyTM

我很抱歉地說，目前這是不可能的。 – locks

如果您只是將用戶和出價傳遞給轉換內容組件，該怎麼辦？在那裏，您可以使用計算屬性來隨意獲取它們，並基於來自轉換內容模板的重構數據來呈現提取用戶和提取出價組件。但是，如果你想要具體的例子，你需要提供一些conrete代碼。 – lependu

不回答你的問題，但如果你正在尋找Ember的internationalizaction解決方案，請看[ember-i18n]（https://github.com/jamesarosen/ember-i18n），我目前在一個複合體中使用它應用程序和工作非常好。 – Terseus

有了一些幫助，我想出了以下可用於ember-i18n和ember 1.11或更高版本的組件。

它可能會進一步優化，但它的工作方式很好，很快。

創建一個新的組件

ember g component t-t

template.hbs

{{#each parts as |part|}} 

    {{#if part.isComponent}} 
    {{component part.content}} 
    {{else}} 
    {{part.content}} 
    {{/if}} 

{{/each}}

component.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') }}

來源

2016-04-27 02:21:49 JeremyTM

動態渲染Ember中的組件ember-i18n

回答

相關問題