应用本地化行为和共享本地化缓存 [英] app-localize-behavior and shared localization cache
本文介绍了应用本地化行为和共享本地化缓存的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
显示要本地化内容的每个元素都应该添加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-local-test属性传递来使其工作。 https://jsfiddle.net/g4evcxzn/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'));
}
这篇关于应用本地化行为和共享本地化缓存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
