应用局部化行为和共享高速缓存定位

根据聚合物文档app-localize-behavior 应用局部化行为和共享高速缓存定位

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

下面的代码片段（改编自this answer）没有找到在标签

也许我错过了一些共享资源？

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

现在在下面摆弄，我做它通过传递资源和语言对象为x局部试验性的工作。 https://jsfiddle.net/g4evcxzn/2/

但应该没有这种

来源

2016-06-16 Jean-Rémi

工作，我看了看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')); 
}

来源

2016-06-16 18:05:14 Alan

请注意，您还必须定义一个语言属性： '语言：{值：“恩”}' 所以要拥有电子应用中非常本地化的元素显示相同的语言，我们必须将语言传递给每个元素。这不是问题吗？ –

我真的不认为这是一个大问题，我的意思是，实际上您可能希望不同的组件以不同的语言显示，无论出于何种原因，因此您应该决定是否共享语言属性 – Alan

我最终做了什么解决这个问题的方法是创建一个扩展Polymer.AppLocalizationBehavior的行为，在那里我抓取资源文件并设置语言。然后，我的应用程序将包含我刚刚定义的行为，并且我会避免在任何地方设置该语言。 –

据何塞A.和Jean-雷米的想法在这里复制/粘贴一些示例代码：

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

来源

2016-11-16 08:54:59 AndreasE

这也是我结束做的 –

如上所述，locales.json的浏览器缓存问题如何？如何在更改时强制使用最新的语言环境文件？ – sinjins

应用局部化行为和共享高速缓存定位

回答

相关问题