Question

的聚合物文件

显示要本地化的内容的每个元素都应添加Polymer.AppLocalizeBehavior。所有这些元素共享一个共同的本地化缓存，所以您只需要加载一次翻译。

在以下代码段（改编自this answer）中未找到标记中的共享资源

也许我错过了什么？

＆＃13;

<!DOCTYPE html>
<html>

<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>


        <x-local-test></x-local-test>
      </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>

  <dom-module id="x-local-test">
    <template>
      <h4>Inside x-local-test</h4>
      <div>{{localize('greeting')}}</div>
    </template>

    <script>
      Polymer({
        is: "x-local-test",
        behaviors: [
          Polymer.AppLocalizeBehavior
        ],

        properties: {
          things: {
            type: Array,
            value: function() {
              return [1, 2, 3];
            }
          }
        },

      });
    </script>
  </dom-module>

</body>

</html>

＆＃13;

现在，在下面的小提琴中，我通过将资源和语言对象作为x-local-test属性传递来实现。 https://jsfiddle.net/g4evcxzn/2/

但它应该没有那个

Answer 1

根据Jose A.和Jean-Rémi的想法，这里有一些复制/粘贴的示例代码：

    <link rel="import" href="../bower_components/polymer/polymer.html">
    <link rel="import" href="../bower_components/app-localize-behavior/app-localize-behavior.html">

    <script>
      MyLocalizeBehaviorImpl = {
        properties: {
          language: {
            value: 'de'
          }
        },
        attached: function() {
          this.loadResources(this.resolveUrl('locales.json'));
        }
      };
      MyLocalizeBehavior = [MyLocalizeBehaviorImpl, Polymer.AppLocalizeBehavior]; 
    </script>

在所有自定义组件中包含行为文件并添加行为：

<link rel="import" href="./my-localize-behavior.html">

......

behaviors: [
    MyLocalizeBehavior
],

Answer 2

我看了AppLocaleBehavior's demo，如果你真的看到了回购，他们会使用两个元素，一个loads the resources from an external json，另一个有locally defined，并且演示，似乎没有共享缓存，就像发生在你身上的事一样。

这让我很奇怪他们确实提到了缓存，所以我看了behavior's code并发现了一些有趣的东西，缓存实际上存在但似乎它的目的是防止加载相同的外部资源多次而不是共享resources属性。

因此，如果您想要在多个元素上共享本地化资源，那么可以采用共同资源（让我们称之为locales.json）并调用loadResources函数在每一个上（由于请求被缓存，您不必担心多次加载文件）。您可以在attached回调上执行此操作：

attached: function () {
  this.loadResources(this.resolveUrl('locales.json'));
}

app-localize-behavior和共享本地化缓存

2 个答案: