6
В соответствии с документацией для полимерной 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>Теперь в следующей скрипке, я сделал свою работу, передавая ресурсы и языка объект как х-местных испытания свойств. https://jsfiddle.net/g4evcxzn/2/
Но он должен работать без этого
Обратите внимание, что вы должны определить свойство языка: 'язык: {значение:«ан»}' Таким образом, чтобы иметь е очень локализованный элемент в приложении отображает тот же язык, мы должны передавать язык каждому элементу. Разве это не проблема? –
Я действительно не думаю, что это большая проблема, я имею в виду, что вы действительно можете хотеть, чтобы разные компоненты отображались на разных языках по какой-либо причине, поэтому вы должны решить, используете ли вы свойство языка или нет. – Alan
Что я в итоге сделал для решения этой проблемы было создание поведения, которое расширило Polymer.AppLocalizationBehavior, там я захватил файл ресурсов и установил язык.Мое приложение затем включало бы поведение, которое я только что определил, и я бы не стал устанавливать язык везде. –