JavaScript 内的本地化

Question

这是完全相同的问题：

Polymer 已放弃对 i18n 的支持（显然），并转而使用 format.js 及其 app-localize-behavior 组件。到目前为止，所有示例都使用数据绑定。但是我需要通过 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 and <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

JavaScript 内的本地化

Localization inside JavaScript

javascript

polymer

polymer-1.0