Localization inside JavaScript

Question

It's the exact same question: Localization/Internationalization for Polymer 1.0

Polymer has dropped support for i18n (apparently) and has moved to use format.js with its app-localize-behavior component. So far all the examples work with data binding. But I need to set an element's attribute through JavaScript's setAttribute method.. How can I achieve this?

    <dom-module id="pgarena-login">
      <template>
        <style is="custom-style" include="pgarena-login-styles"></style>
        <style>

        </style>
        <form is="iron-form" method="post" action$="{{action}}" id="login">
           <h2>Login</h2>
          <paper-input label="Username" required tabindex="0" name="UserName"></paper-input>
          <paper-input label="Password" type="password" required tabindex="0" name="Password"></paper-input>
          <!-- Anti Forgery Token -->
          <content></content>
          <paper-button onclick="_submit(event)">Login</paper-button>
        </form>
      </template>
      <script>
          function _submit(event) {
              Polymer.dom(event).localTarget.parentElement.submit();
          }

      (function() {
          'use strict';
           Polymer({
               is: 'pgarena-login',
               behaviors: [
                Polymer.AppLocalizeBehavior
               ],
               ready: function () {

                   var $this = this;

           this.$.login.addEventListener('iron-form-error', function (event) {
                       console.log(event);
                       if (event.detail.request.xhr.status === 400) {
                           Array.prototype.slice.call(Polymer.dom(this.root).querySelectorAll('paper-input'))
                               .forEach(function(element) {
                                   element.setAttribute("invalid", true);
//Problematic Line here=>                                    element.setAttribute("error-message",         $this.localize("Login_Fail_UsernameInvalid"));
                               });
                       }
                   });

                   this.$.login.addEventListener('iron-form-response', function (event) {
                       console.log('chapewn');
                       console.log(event);
                       console.log(event.detail);
                   });
               },
            properties : {
              action : {
                type: String
              }
            },
            attached: function () {
                this.loadResources(this.resolveUrl('../locales.json'));
            },
          });
        })();

      </script>
    </dom-module>

I have yet be able to crack it. I have tried everything, but still don't know how to access it. — Jose A, Jul 29 '16 at 20:43

score 3 · Accepted Answer · answered Jul 30 '16 at 01:14

Your question isn't really about localization but rather about setting properties on <paper-input>. Specifically, you'd like to set <paper-input>.invalid and <paper-input>.errorMessage, but you're incorrectly using .setAttribute() instead of directly assigning values:

// incorrect
el.setAttribute('error-message', 'Invalid username/password');

// correct
el.errorMessage = 'Invalid username/password';

In your code, you'd replace this:

Array.prototype.slice.call(Polymer.dom(this.root).querySelectorAll('paper-input'))
  .forEach(function(element) {
    element.setAttribute("invalid", true);
    element.setAttribute("error-message", $this.localize("Login_Fail_UsernameInvalid"));
  });

with this:

[].slice.call(this.querySelectorAll('paper-input')).forEach(function(element) {
    element.invalid = true;
    element.errorMessage = $this.localize('Login_Fail_UsernameInvalid');
  });

codepen

Thanks a bunch tony19! So should I replace all the setAttribute() for the .propertyName? — Jose A, Jul 30 '16 at 01:38
Seeing this: http://stackoverflow.com/questions/3919291/when-to-use-setattribute-vs-attribute-in-javascript. I've just learned that as long as the properties are existent in the element's definition it's ok to use the "." sign! — Jose A, Jul 30 '16 at 01:40

Localization inside JavaScript

1 Answers1