blocks|key|247255|text|我自己创建了一个实现。看看我做了什么没那么难做。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|247256|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I created an implementation on my own. Looking what I made it's not that difficult to do.

blocks|key|2431864|text|I18n和l10n也在我的待办事项清单上.目前，我正在移植一个应用程序从AngularJS到聚合物。后端是。我使用i18n-js+gem，它将Rails转换文件(en.yml、de.yml等)转换为一个包含有所有翻译的I18n对象的大JavaScript文件。这个gem还提供了一个用于执行文本翻译和值本地化的JavaScript库。但是还有其他JavaScript库提供了类似的功能。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2431865|当前区域设置是从HTTP请求的响应中设置的，返回用户接受语言报头。|2431866|到目前为止还没有具体的聚合物。|2431867|然后，我创建了一组全局聚合物表达式过滤器，它们对输入字符串执行各种地区转换。这与我学习在AngularJS应用程序中使用的方法是相同的。翻译过滤器如下所示(I18n.t是JavaScript库的翻译函数)|style|CODE|2431868|PolymerExpressions.prototype.i18n+=+function(key)+{
++return+I18n.t(key);
};|code-block|syntax|javascript|2431869|并且是这样使用的|2431870|<paper-button+label="{{+'action.help'+%7C+i18n+}}"></paper-button>|2431871|日期本地化可以写为|2431872|{{+someDate+%7C+i18n_date('short')+}}|2431873|我将i18n过滤器和额外的助手函数打包到一个聚合物元素中，所以我也可以将这个元素包含在另一个元素中，并使用它的JavaScript代码中的转换函数。|2431874|i18n元素也包含在我的主app元素中，它在其中初始化I18n库并设置默认和当前区域设置。|2431875|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/fnando/i18n-js^0|1L|7|0|0|0|0|26|6|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@$A|1B|B|1C|1|1D]]|C|$]]|$1|D|3|E|5|6|7|1E|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|1F|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|1G|8|@$A|1H|B|1I|J|K]]|9|@]|C|$]]|$1|L|3|M|5|N|7|1J|8|@]|9|@]|C|$O|P]]|$1|Q|3|R|5|6|7|1K|8|@]|9|@]|C|$]]|$1|S|3|T|5|N|7|1L|8|@]|9|@]|C|$O|P]]|$1|U|3|V|5|6|7|1M|8|@]|9|@]|C|$]]|$1|W|3|X|5|N|7|1N|8|@]|9|@]|C|$O|P]]|$1|Y|3|Z|5|6|7|1O|8|@]|9|@]|C|$]]|$1|10|3|11|5|6|7|1P|8|@]|9|@]|C|$]]|$1|12|3|-4|5|6|7|1Q|8|@]|9|@]|C|$]]]|13|$14|$5|15|16|17|C|$18|19]]]]

I18n and l10n are also on my to-do list. Currently i'm porting an app from AngularJS to Polymer. The back-end is Ruby on Rails. I use the <a href="https://github.com/fnando/i18n-js">i18n-js</a> gem which converts the Rails translation files (en.yml, de.yml and so on) into one big JavaScript file containing an I18n object with all the translations. This gem also provides a JavaScript library for performing text translations and value localizations. But there are other JavaScript libraries providing a similar functionality.

The current locale is set from the response of a HTTP request, returning the users Accept-Language header.

Nothing Polymer specific up to this point.

I then created a bunch of global Polymer expression filters that perform the various locale transformations on their input strings. This is the same method as the one that i've learned to use in an AngularJS application. The translation filter looks like follows (<code>I18n.t</code> is the translation function of the JavaScript library)

<pre><code>PolymerExpressions.prototype.i18n = function(key) {
 return I18n.t(key);
};
</code></pre>

and is used like so

<pre><code>&lt;paper-button label="{{ 'action.help' | i18n }}"&gt;&lt;/paper-button&gt;
</code></pre>

A date localization may be written as

<pre><code>{{ someDate | i18n_date('short') }}
</code></pre>

I packaged the i18n filters and additional helper functions into a Polymer element, so I can also include this element in another element and use the translation functions from within it's JavaScript code.

The i18n element is also include in my main app element where it initializes the I18n library and sets the default and current locale.

blocks|key|247309|text|使用Polymer.AppLocalizeBehavior|type|unstyled|depth|inlineStyleRanges|entityRanges|data|247310|https://github.com/PolymerElements/app-localize-behavior|offset|length|247311|我在PWA模板中为每个自定义元素使用这种行为。|247312|https://github.com/StartPolymer/progressive-web-app-template|247313|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|1K|0|0|0|0|1O|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|J|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|C]]|Q|$5|M|N|O|A|$P|I]]]]

Use Polymer.AppLocalizeBehavior

<a href="https://github.com/PolymerElements/app-localize-behavior" rel="nofollow">https://github.com/PolymerElements/app-localize-behavior</a>

I am using this behavior in PWA Template for locales per custom element.

<a href="https://github.com/StartPolymer/progressive-web-app-template" rel="nofollow">https://github.com/StartPolymer/progressive-web-app-template</a>

blocks|key|823682|text|由于没有意识到Polymer-way正在执行i18n，我建议在服务器端进行操作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|823683|如果框架是Spring，我将将自定义元素实现为jsp，并像往常一样使用<spring:message+/>标记处理i18n。|823684|唯一的警告是，切换应用程序的语言将需要一个完整的重新加载。但是，由于语言转换通常不经常进行，我不认为这是一个问题。|823685|entityMap^0|7|7|0|5|6|Z|I|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|T|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|K|$]]

Not being aware of a <code>Polymer</code>-way doing i18n, I suggest doing that server-side.

In case the framework is <code>Spring</code>, I would implement the custom elements as jsp, and handle the i18n as usual with the <code>&lt;spring:message /&gt;</code> tags.

Only caveat is that switching the language of the application would require a complete reload. But as language switching is usually not done often, I don't think of this as a problem.

blocks|key|2431951|text|对于Polymer1.0，我刚刚发布了一个简单的(大量开发中的)元素(请在gitlab上查看它或阅读有关它的这里)。它异步加载转换文件，使用非常简单：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2431952|
<link+rel="import"+href="bower_components/quaintous-i18n/quaintous-i18n.html">

<quaintous-i18n+locales-path="/locales/fa.json"></quaintous-i18n>|code-block|syntax|javascript|2431953|现在，您可以以各种方式使用它：|2431954|在计算属性中:只需添加I18N作为元素行为并转换数据绑定，例如{{__('hello')}}|unordered-list-item|style|CODE|2431955|在全局上下文中，只需使用I18N对象，例如I18N.__('hello')|2431956|entityMap|0|LINK|mutability|MUTABLE|url|https://gitlab.com/quaintous-polymer/quaintous-i18n|1|http://quaintous.com/2016/03/17/polymer-internationalization/|2|https://www.polymer-project.org/1.0/docs/devguide/behaviors.html^0|11|6|0|1I|2|1|0|0|0|B|4|V|F|J|2|2|0|C|4|L|G|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@$A|14|B|15|1|16]|$A|17|B|18|1|19]]|C|$]]|$1|D|3|E|5|F|7|1A|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|1B|8|@]|9|@]|C|$]]|$1|K|3|L|5|M|7|1C|8|@$A|1D|B|1E|N|O]|$A|1F|B|1G|N|O]]|9|@$A|1H|B|1I|1|1J]]|C|$]]|$1|P|3|Q|5|M|7|1K|8|@$A|1L|B|1M|N|O]|$A|1N|B|1O|N|O]]|9|@]|C|$]]|$1|R|3|-4|5|6|7|1P|8|@]|9|@]|C|$]]]|S|$T|$5|U|V|W|C|$X|Y]]|Z|$5|U|V|W|C|$X|10]]|11|$5|U|V|W|C|$X|12]]]]

For Polymer 1.0 I just published a simple (heavily in development) element (see it on <a href="https://gitlab.com/quaintous-polymer/quaintous-i18n" rel="nofollow">gitlab</a> or read about it <a href="http://quaintous.com/2016/03/17/polymer-internationalization/" rel="nofollow">here</a>). It loads the translation files asynchronously and the usage is fairly simple:

<pre class="lang-html prettyprint-override"><code>&lt;!-- Import it in head --&gt;
&lt;link rel="import" href="bower_components/quaintous-i18n/quaintous-i18n.html"&gt;
&lt;!-- initialize it in body --&gt;
&lt;quaintous-i18n locales-path="/locales/fa.json"&gt;&lt;/quaintous-i18n&gt;
</code></pre>

Now you can use it in various ways:

<ul>
<li>In computed properties: just add <code>I18N</code> as your element <a href="https://www.polymer-project.org/1.0/docs/devguide/behaviors.html" rel="nofollow">behavior</a> and translate your data bindings, e.g. <code>{{__('hello')}}</code></li>
<li>In global context just use <code>I18N</code> object, e.g. <code>I18N.__('hello')</code></li>
</ul>

blocks|key|823764|text|我实现了一种不同的方法，即使有AppLocalizeBehavior，它似乎做得很好。我创建了一个locale.json文件，其中包含语言列表、需要数据的页面名称以及要显示的数据。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|823765|{
"en":+{
"loginPage"+++++++:+{
++"login"+++++++++++:+"Log+in",
++"loginUserid"+++++:+"Enter+user+id",
++"loginPassword"+++:+"Enter+password"
},
},
"nl":+{
"loginPage"+++++++:+{
++"login"+++++++++++:+"Log+in",
++"loginUserid"+++++:+"Voer+gebruikers-ID+in",
++"loginPassword"+++:+"Voer+wachtwoord+in"
},
},
}|code-block|syntax|javascript|823766|我创建了一个翻译组件，它负责在本地存储中设置语言(尽管它需要一些重构，并且我可以使用导航器对象获取语言)以及从locale.json获取数据。这个样子是这样的：|823767|class+Translate+extends+
Polymer.mixinBehaviors([Polymer.AppLocalizeBehavior],+Polymer.Element)+{
++++++++static+get+is()+{+return+'translate';+}


++++++++static+get+properties()+{
++++++++++++return+{
++++++++++++++++language:+{
++++++++++++++++++++type:+String,
++++++++++++++++++++value:+'nl',
++++++++++++++++++++notify:+true
++++++++++++++++},
++++++++++++++++resources:+{
++++++++++++++++++++type:+Object,
++++++++++++++++++++notify:+true
++++++++++++++++}
++++++++++++}
++++++++}

++++++++ready()+{
++++++++++++super.ready();
++++++++++++if+(localStorage.length)+{
++++++++++++++++if+(localStorage.getItem('language'))+{
++++++++++++++++++++this.language+=+localStorage.getItem('language');
++++++++++++++++}
++++++++++++++++else+{
++++++++++++++++++++localStorage.setItem('language',+this.language);
++++++++++++++++}
++++++++++++}+else+{
++++++++++++++++localStorage.setItem('language',+this.language);
++++++++++++}

++++++++}

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

++++}

++++window.customElements.define(Translate.is,+Translate);|823768|现在，您可以在应用程序的根或app+shell中使用这个自定义元素。|823769|<translate+
class="translate"+
language="{{language}}"+
resources="{{resources}}">
</translate>|823770|在资源属性上放置一个观察者，并从您的locale.json中获取数据。现在，基于不同的页面，只传递该页面所需的翻译值。页面值是如下所示的翻译字符串的值：|823771|<login-form+
++++++++title='Login'+
++++++++name="login"+
++++++++page-values="[[pageValues.loginPage]]"+
++++++++login-success="[[_loginSuccess]]"
++++++++api={{apiCollection.login}}></login-form>|823772|希望这能有所帮助。|823773|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|12|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|14|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

I implemented a different way of doing it even though there is AppLocalizeBehavior which seem to do it pretty well. I created a locale.json file with a list of languages, name of the page for which data was needed and then the data to be displayed.

<pre><code>{
"en": {
"loginPage" : {
 "login" : "Log in",
 "loginUserid" : "Enter user id",
 "loginPassword" : "Enter password"
},
},
"nl": {
"loginPage" : {
 "login" : "Log in",
 "loginUserid" : "Voer gebruikers-ID in",
 "loginPassword" : "Voer wachtwoord in"
},
},
}
</code></pre>

I created a translate component which has the responsibility of setting the language in the local-storage (though it needs a bit of refactoring and I could use navigator object for getting the language) as well as get data from the locale.json. This looked like this:

<pre><code>class Translate extends 
Polymer.mixinBehaviors([Polymer.AppLocalizeBehavior], Polymer.Element) {
 static get is() { return 'translate'; }


 static get properties() {
 return {
 language: {
 type: String,
 value: 'nl',
 notify: true
 },
 resources: {
 type: Object,
 notify: true
 }
 }
 }

 ready() {
 super.ready();
 if (localStorage.length) {
 if (localStorage.getItem('language')) {
 this.language = localStorage.getItem('language');
 }
 else {
 localStorage.setItem('language', this.language);
 }
 } else {
 localStorage.setItem('language', this.language);
 }

 }

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

 }

 window.customElements.define(Translate.is, Translate);
</code></pre>

Now you can utilize this custom element inside your root or app shell of the application

<pre><code>&lt;translate 
class="translate" 
language="{{language}}" 
resources="{{resources}}"&gt;
&lt;/translate&gt;
</code></pre>

Put an observer on your resources property and get the data from your locale.json. Now based on different pages pass only the translation values which are needed for that page. page-values being the values of the translation strings like this:

<pre><code>&lt;login-form 
 title='Login' 
 name="login" 
 page-values="[[pageValues.loginPage]]" 
 login-success="[[_loginSuccess]]"
 api={{apiCollection.login}}&gt;&lt;/login-form&gt;
</code></pre>

Hope this helps.

I'm going to create a webapp with Polymer. For that webapp I need localization. Is there a Polymer way to do localization? 
Has anyone ever done localization in a Polymer webapp?

Localization in Polymer?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我要用聚合物制作一个网络应用程序。对于那个网页应用程序，我需要本地化。是否有一种聚合物方法来进行本地化？有人在聚合物网络应用中做过本地化吗？

问聚合物中的局域化？
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问聚合物中的局域化？EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问聚合物中的局域化？
EN