Jea*_*émi 6 localization polymer
根据app-localize-behavior的聚合物文档
显示要本地化的内容的每个元素都应添加Polymer.AppLocalizeBehavior.所有这些元素共享一个公共的本地化缓存,因此您只需要加载一次翻译.
在下面的代码片段(改编自此答案)中找不到共享资源 标签
也许我错过了什么？
<!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/
但它应该没有它
根据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
],
我看一下它AppLocaleBehavior的演示,如果你真的看看repo,它们会使用两个元素,一个从外部json加载资源,另一个在本地定义它们,在演示中,不要似乎正在分享缓存,正如发生在你身上的事情一样.
这让我很奇怪他们确实提到了缓存,所以我看了一下行为的代码,发现了一些有趣的东西,缓存实际存在,但似乎它的目的是防止多次加载相同的外部资源而不是共享该resources物业.
所以,如果你想在多个元素上共享本地化资源,那么就可以拥有一个共同的资源(假设我们称之为locales.json)并loadResources在每个元素上调用该函数(因为请求是缓存的,所以你不需要担心多次加载文件).你可以在attached回调上这样做:
attached: function () {
this.loadResources(this.resolveUrl('locales.json'));
}
| 归档时间： |
|
| 查看次数： |
1963 次 |
| 最近记录： |