本地化內的JavaScript

Question

這是完全一樣的問題： Localization/Internationalization for Polymer 1.0

聚合物已下降爲支持i18n（顯然）和已經轉移到使用format.js其應用，本地化行爲的組成部分。到目前爲止，所有示例都使用數據綁定。但我需要通過JavaScript的setAttribute方法設置元素的屬性。我該如何實現這一點？

<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