How can i use Localize in ready Function ? about app-localize-behavior HOT 24 OPEN

It seems you can work around this issue using computed properties, like this:

Polymer({
  properties: {
    errorMessage: {
      type: String,
      computed: '_initErrorMessage(localize)'
    },
  },
  _initErrorMessage: function(localize) {
    return localize('myMsg');
  }
});

from app-localize-behavior.

You can use it like that:

this.async(function(){
    this.localize('translation')
},100);

from app-localize-behavior.

@davebaol Me neither, I think it has something to do with the computed properties and the way Polymer handles them. But, why not make localize a regular function?

from app-localize-behavior.

I think it should be this.localize('login_failed'), not just localize('login_failed').
However I got it working from inside regular functions only, not from inside lifecycle functions like ready or even attached. Not sure why, though. Maybe this has something to do with computed properties.

from app-localize-behavior.

@hyyan
Thanks, this looks like an acceptable solution most of the times.
However it's still not clear why computed functions are not available in lifecycle functions.
It seems that Polymer documentation is lacking on this topic. 😞

from app-localize-behavior.

Thanks guys !

I will try it later.
In the case where i want to call a function inside the ready function or a normal function, how it's work ?

For example : See the showToast() function

<script>
 Polymer({
   is: 'my-login',

   ready: function() {
     this.async(function() {
       this.showToast("This is a message...");
     },100);
   },

   otherFunction: function() {
     this.showToast("This is a message...");
   },

   showToast: function(message) {
     toast.show({text: message, duration: 5000});
   }
 });
</script>

Thanks,
Loïc.

from app-localize-behavior.

Just replace the text message with this.localize('myKey');
Also, about the function you're passing to async, you should either bind it to this or make it an arrow function.

from app-localize-behavior.

Hi guys !

I tried this after your recommendation :

toastMessage.show({horizontalAlign: 'right', verticalAlign: 'top', duration: 5000, text: this.async(function() { this.localize('login_failed'); },100)});

And I still have :

Uncaught ReferenceError: this.localize is not defined(…)

Loïc.

from app-localize-behavior.

@SheanYu
Try something like this

this.async((function() { 
  toastMessage.show({
    horizontalAlign: 'right',
    verticalAlign: 'top',
    duration: 5000,
    text: this.localize('login_failed')
  });
}).bind(this), 100);

from app-localize-behavior.

@davebaol
Same error...

Note that i'm in the ready function :

ready: function() {
  ...

  loginForm.addEventListener('iron-form-response', function(event) {
    if (event.detail.response.error) {
      this.async((function() { 
        toastMessage.show({
          horizontalAlign: 'right',
          verticalAlign: 'top',
          duration: 5000,
          text: this.localize('login_failed')
        });
      }).bind(this), 100);
    } else {
      ...
    }
  });

  ...
},

from app-localize-behavior.

@SheanYu
Actually, that code is executed out of the ready function since it's an event handler.
You just have to bind the event handler to this like that (function(event) {...}).bind(this)

from app-localize-behavior.

@davebaol

With this :

ready: function() {
  ...

  loginForm.addEventListener('iron-form-response', function(event) {
    if (event.detail.response.error) {
      this.async((function() { 
        toastMessage.show({
          horizontalAlign: 'right',
          verticalAlign: 'top',
          duration: 5000,
          text: this.localize('login_failed')
        });
      }).bind(this), 100);
    } else {
      ...
    }
  }).bind(this);

  ...
},

I got this error :

Uncaught TypeError: Cannot read property 'bind' of undefined(…)

ready  @ my-login.html:165
_invokeBehavior @ polymer-micro.html:455
_doBehavior @ polymer-micro.html:445
_readySelf @ polymer-mini.html:88
_ready @ polymer-mini.html:75
_tryReady @ polymer-mini.html:60
_initFeatures @ polymer.html:4053
createdCallback @ polymer-micro.html:202
window.Polymer @ polymer-micro.html:65
(anonymous function) @ my-login.html:124

from app-localize-behavior.

@SheanYu
Well, you're binding this to nothing. This should make it work

  loginForm.addEventListener('iron-form-response', (function(event) {
    ...
  }).bind(this));

from app-localize-behavior.

I'm having problems too with localize in the ready event. It says localize is not a function.

The (ugly) async approach works most of the times, but sometimes 100ms is not enough and it fails. I know I can increase the timeout, but I think it would be better to have a solution to make it always work.

I understand that resources may not yet be loaded, but I expect it to be another kind of error...

from app-localize-behavior.

I understand that resources may not yet be loaded, but I expect it to be another kind of error...

I don't think it's a matter of resources not loaded yet

from app-localize-behavior.

@lluisgener
Because being localize a computed property when language or resources change all [[localize(...)]] are dynamically re-calculated.

from app-localize-behavior.

@davebaol
I see. But I guess only bound localizations are re-calculated, not the ones invoked programatically. So maybe a good solution would be to keep the computed property as is, and also have a regular function which should be the recommended in a no-bound usage.

Or make the Polymer team invoke the ready event when computed properties have been initialized, if it's possible...

from app-localize-behavior.

So is there even any way of calling localize from within a polymer element, indifferent of in the ready() function or any other element function?

As it is usual to process UI texts in functions, it is necessary to grab translations in the code and then pass it to the UI.

Regards,
Michael

from app-localize-behavior.

@Mika83AC look at @craPkit post. It worked flawlessly for me. But you need to tweak a little your code to correctly use computed properties.

Regards.

from app-localize-behavior.

Hm... sure, this is possible but creates an immense overhead (code size, complexity ...). This is just not possible for larger applications and can't be the solution the Polymer team wants to see.

So I really hope they have another solution for us. :)

from app-localize-behavior.

I think that it's the way to go, because localize is a computed method to be able to change language during execution, and I think the better way to do it is with a calculated method, as it is.

from app-localize-behavior.

** Removed because of completely bullshit, sorry :D **

from app-localize-behavior.

Doesn't this.localize('translationKey') work outside of ready() anyway?

from app-localize-behavior.

I manage to resolve this way

<link rel="import" href="../bower_components/app-localize-behavior/app-localize-behavior.html">

<dom-module id="x-custom">

  <template>
    <span> [[_greetings(name, localize)]]</span>
  </template>

  <script>
    Polymer({

      is: 'x-custom',
      behaviors: [
          Polymer.AppLocalizeBehavior
      ],
      properties: {
        name: String,
        language: { type: String,  value: 'zh-CN' }
      },
      attached: function() {
        this.loadResources(this.resolveUrl('locales.json'));
      },
      _greetings: function(name, localize) {
        return  localize('hello')+ ' ' + name;
      }

    });
  </script>

</dom-module>

from app-localize-behavior.