Локализация внутри JavaScript

Question

Это тот же самый вопрос: Localization/Internationalization for Polymer 1.0

Polymer упала поддержку i18n (по-видимому) и переехала использовать format.js с приложением-локализуется-поведение компонента. Пока все примеры работают с привязкой данных. Но мне нужно установить атрибут элемента с помощью метода setAttribute JavaScript. Как я могу это достичь?

<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> 

Answer 1

Ваш вопрос не совсем о локализации, а о настройке свойств на <paper-input>. В частности, вы хотели бы установить <paper-input>.invalid и <paper-input>.errorMessage, но вы неправильно используете .setAttribute() вместо прямого присвоения значений:

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

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

В вашем коде, вы бы заменить это:

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")); 
    }); 

с это:

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

codepen