燼：傳遞本地化關鍵組件模板

我有一個模式，對話框組件模板，其中包含以下燼：傳遞本地化關鍵組件模板

<div class="header"> 
    {{t title}} 
    </div>

所以，我現在用的餘燼，國際化[1]庫本地化添加到燼。現在，我打電話從實際模態對話框模板組件模板：

{{#modal-dialog title="dialog.title"}} 
    <h3 class="flush--top">I am a modal dialog</h5> 
    <button {{action "close"}}>Done</button> 
{{/modal-dialog}}

什麼我想在這裏做的，定義了在該對話框的模板用於本地化的關鍵，這是傳遞到組件模板並在那裏翻譯。但是，這會導致以下錯誤：Missing translation: title。所以變量標題似乎實際上被視爲一個字符串而不是一個變量。

我也可以在對話框模板翻譯的標題，並將其傳遞到組件模板：

對話框：

{{#modal-dialog title={{t "dialog.title"}} action="close"}}

這導致一個編譯器錯誤：

是有什麼辦法可以做到這一點？

[1] https://github.com/jamesarosen/ember-i18n

來源

2014-06-26 Steve Hummingbird

mitchlloyd這裏介紹一個很好的解決方案：http://discuss.emberjs.com/t/need-to-pass-a-value-from-component-template-to-component/5792/6

使用模板翻譯後綴（我只是路過一個標題屬性）：

{{#modal-dialog action="close" titleTranslation="modal.title"}} 
    <h3 class="flush--top">Name Change Modal</h5> 
{{/modal-dialog}}

組件從餘燼，國際化使用的Mixin：

export default Ember.Component.extend(Em.I18n.TranslateableProperties, { 
});

最後在模板，只是參考翻譯title屬性：

<div class="title"> {{title}}</div>

來源

2014-06-29 22:25:18

可以計算控制器或模型內的title屬性。所以：

{{#modal-dialog title={{t "dialog.title"}} action="close"}}

是：

{{#modal-dialog title="dialog.translateTitle" action="close"}}

然後你可以有一個計算的屬性，像這樣：

translateTitle: function() { 
    return this.translateLibraryMethodYouUse(this.get('title')); 
}.property('title')

這顯然是僞代碼，但是如果可以的話它應該工作讓您的本地化進入translateTitle屬性。你可以把它放在你的對話模型中，或者你可以把它放到你的物品控制器或者你正在使用的那個上下文中。

UPDATE ::

好吧，所以看看那個圖書館。您也可以嘗試與Em.I18n.TranslateableProperties混入更新您的控制器或模型，讓你翻譯的屬性綁定：

App.DialogController = Ember.ObjectController.extend(Em.I18n.TranslateableProperties, { 
    titleTranslation: 'dialog.title' 
});

祝你好運，希望幫助！

來源

2014-06-26 23:15:16

謝謝，我試圖讓，使用你所描述的打算，但一切都打破了，當我試圖要麼訪問我在從組件的組件，模板中的值，或者當我試圖訪問從組件模板中設置在控制器中的值。我在這裏寫了更多關於這些問題的文章：http://discuss.emberjs.com/t/need-to-pass-a-value-from-component-template-to-component/5792 –

更好的辦法是使用車把子表達式：

你可以使用一些這方面是這樣的：

{{#modal-dialog title=(tv "dialog.title") action="close"}}

這裏電視是我用過的幫手：

而且您需要爲此註冊一個幫手：

Ember.Handlebars.registerHelper('tv', function (key) { 
    return Em.I18n.t(key); 
});

希望這有助於

來源

2014-10-30 12:52:29

上述解釋並不與Ember，國際化的最新版本，其中TranslateableProperties has been removed：

這是我如何做它與Ember，國際化4.x和灰燼，CLI 1.13合作1.1：

1 - 確保服務i18n在組件注入：

//initializers/i18n.js 
export default { 
    name: 'i18n', 

    after: 'ember-i18n', 

    initialize: function(_, app) { 
     app.inject('controller', 'i18n', 'service:i18n'); 
     app.inject('component', 'i18n', 'service:i18n'); 
    } 
};

2 - 該組件的模板引用{{title}}屬性：

//templates/components/pick-card.hbs 
!-- Selection of the card --> 
<div class="row" style="margin-top: 40px;"> 
    <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h1 class="panel-title">{{title}}</h1> 
      </div> 
...

3 - 在那裏我打電話給我的分量模板：

//templates/security/forgot-username.hbs 
{{#pick-card title-i18n="page.forgot_username"}} 
{{/pick-card}}

4 - 組件的控制器，其中神奇的是：

import Ember from 'ember'; 
    import {translationMacro as t} from "ember-i18n"; 

    export default Ember.Component.extend({ 
     title: Ember.computed('i18n.locale', function() { 
      return this.get('i18n').t(this.get('title-i18n')); 
     }) 
    });

如ember-i18n doc使用說明 i18n.locale對於確保一旦用戶c自動翻譯屬性{{title}}是至關重要的改變了語言環境。

玩得開心:)

來源

2015-07-20 12:35:51

只是爲了更新這裏的回覆，使其更新一點！正如@mohamedjahabersadiq所述，您可以使用Subexpressions。這些在HTMLBars（> = Ember 1.10.0）中也可以正常工作。但是，您不必註冊新的助手，您可以使用來自ember-i18n的現有t助手。

{{#modal-dialog title=(t "dialog.title")}} 
    Hello 
{{/modal-dialog}}

來源

2015-07-23 16:11:53

燼：傳遞本地化關鍵組件模板

回答

相關問題