app-localize-behavior and nested template

UPDATE (6/4/16): The <app-localize-behavior> bug was caused by a Polymer core bug, which is now fixed in Polymer 1.5.0 (jsfiddle).

UPDATE (5/20/16): This appears to be a bug in Polymer 1.4.0, as demonstrated in this jsfiddle. My demo from above had worked because I was using Polymer's latest code from master. (Note there are several commits since the v1.4.0 tag.)

As a workaround, use Bower to install a working commit of Polymer (as of 20-May-2016, the master branch is at commit 409ad83, which works properly with <app-localize-behavior>):

bower i -S polymer#409ad83

Bower will prompt you to select a specific Polymer version, in which case you should enter !1.

Unable to find a suitable version for polymer, please choose one by typing one of the numbers below:
    1) polymer#409ad83 which resolved to 409ad83
    2) polymer#^1.4.0 which resolved to 1.4.0 and is required by polymer-intl
    3) polymer#^1.0.0 which resolved to 1.4.0 and is required by iron-media-query#1.0.8
    4) polymer#^1.2.1 which resolved to 1.4.0 and is required by paper-behaviors#1.0.11
    5) polymer#^1.3.0 which resolved to 1.4.0 and is required by app-localize-behavior#0.9.0
    6) polymer#^1.2.0 which resolved to 1.4.0 and is required by iron-selector#1.5.2
    7) polymer#^1.1.0 which resolved to 1.4.0 and is required by iron-flex-layout#1.3.1

Prefix the choice with ! to persist it to bower.json

? Answer

I didn't have any trouble using localize('greeting') inside a template repeater. Can you post a jsfiddle of your code?

Here's a working snippet (based on <app-localize-behavior> demo):

<head>
  <base href="https://polygit.org/polymer+:master/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <script src="https://rawgit.com/yahoo/intl-messageformat/d361003/dist/intl-messageformat.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-toggle-button/paper-toggle-button.html">
  <link rel="import" href="app-localize-behavior/app-localize-behavior.html">

</head>

<body>
  <x-local-translate></x-local-translate>

  <dom-module id="x-local-translate">
    <template>

      <div>
        <span title="english">🇬🇧</span>
        <paper-toggle-button on-change="_toggle" id="switch"></paper-toggle-button>
        <span title="french">🇫🇷</span>
      </div>

      <div>
        <h4>Outside Repeater</h4>
        <div>
          <div>{{localize('greeting')}}</div>
        </div>

        <h4>Template Repeater Items</h4>
        <template is="dom-repeat" items="{{things}}">
          <div>{{localize('greeting')}}</div>
        </template>

      </div>
    </template>

    <script>
      Polymer({
        is: "x-local-translate",
        behaviors: [
          Polymer.AppLocalizeBehavior
        ],
        properties: {
          things: {
            type: Array,
            value: function() {
              return [1, 2, 3];
            }
          },

          /* Overriden from AppLocalizeBehavior */
          language: {
            value: 'en',
            type: String
          },

          /* Overriden from AppLocalizeBehavior */
          resources: {
            type: Object,
            value: function() {
              return {
                'en': {
                  'greeting': 'Hello!'
                },
                'fr': {
                  'greeting': 'Bonjour!'
                }
              };
            }
          }
        },
        _toggle: function() {
          this.language = this.$.switch.checked ? 'fr' : 'en';
        }
      });
    </script>
  </dom-module>
</body>

^jsfiddle

Recommended topics

Hot tags