Issue with translate component properties with "underscore" helper which are used by Ember Select

[ghost]

Both:

GenderDisplay = Ember.Component.extend
  label: _"Gender" # no whitespace between '_' and '"'
and

and

GenderDisplay = Ember.Component.extend
  label: _ "Gender" # whitespace

works well.

But when I try to translate select options this way:

GenderDisplay = Ember.Component.extend
  genderOptions:
    [
      { id: "true", name: _"♂ Male" },
      { id: "false", name: _"♀ Female" }
    ]

I'm having error:

unexpected string
[stdin]:11:28: error: unexpected string
      { id: "true", name: _"♂ Male" },

Workaround for this is adding whitespace between _ and " characters.

[ghost]

Seems that this workaround still not works as expected. There is problem with Ember Select selected value when we provide content with options translated using gettext.

LocaleDisplay = Ember.Component.extend
  availableLocales: [
    { name: _ 'English', value: 'en'},
    { name: _ 'Japanese', value: 'ja'}
  ]

= view 'select' content=availableLocales optionValuePath="content.value" optionLabelPath="content.name" value=newValue prompt=prompt

[ghost]

I observed the same behaviour when tried to provide options as array for emberx-select

    x-select value=newValue
      each availableLocales as |locale|
        x-option value=locale.value
          locale.name

Fortunately this code works fine (emblem):

    x-select value=newValue
      if prompt
        x-option
          prompt
      x-option value='en'
        _ 'English'
      x-option value='ja'
        _ 'Japanese'

[mchochowski]

AFAIK we wanted the button/option to say "English" in japanese interface and vice versa. Right @mreinsch?

[mreinsch]

I guess this isn't a good example for this issue? But @marcin is right, the language switch should always show the language using the native name, so we don't need any translation there. But that's off topic here.

[ghost]

Guys, finally I've found what's the problem.

Correctly defined options:

  genderOptions:
    [
      { id: "true", name: _ "♂ Male" },
      { id: "false", name: _ "♀ Female" }
    ]

when I've changed the order:

  genderOptions:
    [
      { name: _ "♂ Male", id: "true" },
      { name: _ "♀ Female", id: "false" }
    ]

It breaks functionality.

Btw Sorry for providing examples from two different components.

[mreinsch]

ah, so the function _ is eating up all the params, including id:?

[ghost]

Exactly @mreinsch. We should be careful with that.