Need to pass a value from component template to component

1

I am trying to implement a modal dialog, which consists of a handlebar component (contains title and close button) and a few handlebar templates (contain the actual content of the dialog). I am using ember-i18n to manage the localisation. I now would like to define the title of the dialog in the handlebar template, which should be passed to the component template, where it should be translated. If I could pass the translated title from the handlebar template to the component, that would be equally fine.

The problem is that I seem to be unable to pass the values around as I need:

  • I can pass the value from the view to a controller and translate it there. However, I canā€™t pass the value from the controller back to the component template.
  • The other way around: I can pass a value from the component to the component template. However I canā€™t get the variable from the template within the component.

This is what I currently have:

templates/components/modal-dialog.hbs: (the translated title needs to be inserted here)

<div class="overlay" {{action "close"}}>  </div> 
<div class="modal">
   <div class="title"> {{title}}</div>   
   <div>{{yield}</div>   
</div>

templates/modal.hbs: (title variable keeps the identifier for the translation)

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

components/modal-dialog.js: (this works fine, the title variable keeps the translated String. However, I would need to get the ā€˜titleā€™ variable from the component template, which I canā€™t get to work properly. If I use something similar in a controller I am able to access the ā€˜titleā€™ variable, but I am no longer able to access the translated attribute within the component template. It just ends up being empty)

export default Ember.Component.extend(Em.I18n.TranslateableProperties, {
  actions: {
    close: function() {
      return this.sendAction();
    }
  },
  titleTranslation: 'modal.title'
});

Is there any way to do what I want?

2

Not sure if Iā€™m understanding this perfectly, but is the main problem that youā€™re dealing with a naming collision on title? Looking at the examples in the Ember-18n readme Iā€™m wondering if passing in the title attribute as titleTranslation is what you want.

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

I donā€™t think this is about naming collisions. I have tried this with various combinations without the translation part in-between. I always end up at the same two issues:

If I use a component and try something like

this.get('title');

then there is no method called ā€˜getā€™ within this. I could not find any other way to get the title value. If I just use title without get, it is an actual element in the DOM and not the value passed from the component-template.

If I use a controller I can use the statement above to get the title, however I canā€™t access any variable I define within the controller from the compnent-template. The variables I print within the template are always empty.

4

I know this is a pain, but is there any way you could setup a JSBin? I feel like what youā€™re trying to do is definitely possible.

5

I agree on the statement about the pain :smiley: I actually could not get the controller part to work the same way it does with ember CLI. A controller with the name of the component produces an error with the JSBin (in case dashes are used for the name) or it never gets called (in case no dashes are used). Not sure how to get this working.

However, it shows the problem with the component. I can define a value ā€˜modalDialogComponentTitleā€™ within the component and render it. But I canā€™t access the raw ā€˜titleā€™ value as it is defined in the handlebar template

http://emberjs.jsbin.com/lidisumo/1/edit?html,css,js,output

6

Does this help clear things up?

http://emberjs.jsbin.com/lidisumo/11/edit

In short I think you should do this in your template:

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

Make sure that there is a translation defined for ā€œmodal.titleā€. Mix-in the library in your component:

export default Ember.Component.extend(Em.I18n.TranslateableProperties, {
  actions: {
    close: function() {
      return this.sendAction();
    }
  }
});

And then just reference title in your template.

<div class="overlay" {{action "close"}}>  </div> 
<div class="modal">
   <div class="title"> {{title}}</div>   
   <div>{{yield}</div>   
</div>
1 Like
7

Thanks a lot. Thatā€™s less code than what I was trying to write.

I somehow just never tried to add the ā€˜Translationā€™ suffix the property in the component template. But that makes things a lot clearer now.