如何使用Polymer构建多语言网站？

I don't want to duplicate my components or use templating application. Then, how can I do that?

我不想复制我的组件或使用模板应用程序。然后,我该怎么办?

1 个解决方案

#1

you could do something like the chrome.i18n api for chrome apps and extensions. https://developer.chrome.com/extensions/i18n the general idea is each language has a json file with all the text. sub foldered by language.

你可以为Chrome应用程序和扩展程序做chrome.i18n api。 https://developer.chrome.com/extensions/i18n一般的想法是每种语言都有一个包含所有文本的json文件。语言愚蠢的。

_locals
    \- en
     |  \- messages.json
     - es
         \- messages.json

content of the json file just needs to be valid json. nothing exciting just key value pairs

json文件的内容只需要是有效的json。没有什么令人兴奋的关键值对

messages.json

{
  elementName: 'my-element',
  elementVersion: '0.1'
}

the user of the element could set the language with a attribute

元素的用户可以使用属性设置语言

<my-element language="en"></my-element>

then in your element you would make a XMLHttpRequest to get the text.

然后在你的元素中,你将创建一个XMLHttpRequest来获取文本。

getLanguageText: function() {
  var xhr = new XMLHttpRequest();
  var url = '/my-element/_locals/' + this.language + '/messages.json';
  xhr.open("GET", url, true);
  xhr.responseType = 'json';
  xhr.send();
  xhr.onload = function (e) {
    this.text = e.target.response;
  }.bind(this);
  xhr.onerror = function (e) {
    console.error('Error Loading Language Text', e);
  };
};

the real issue i guess with this approach is it being dependent on path of the json file staying static. not a real big deal if everyone is going to get the element from say bower where it will always be in the bower_components/my-element/_locals/en/messages.json location.

我猜这个方法真正的问题是它依赖于保持静态的json文件的路径。如果每个人都要从bower获取元素,那么它将永远位于bower_components / my-element / _locals / en / messages.json位置,这不是一个真正的大问题。

then you could use the values in your html just like any other polymer value.

然后你就可以像使用任何其他聚合物值一样使用html中的值。

{{text.elementName}}

maybe this will help. /shrug

也许这会有所帮助。 /耸肩

edit: i didn't see this @ time of post but you might need to bind this to the onload callback. in the original answer this would be the xhr object. by using .bind(this) the callback would correctly target the custom element. ill edit answer.

编辑:我没有看到@发布时间,但您可能需要将其绑定到onload回调。在原始答案中,这将是xhr对象。通过使用.bind(this),回调将正确地定位自定义元素。生病编辑答案。

#1

_locals
    \- en
     |  \- messages.json
     - es
         \- messages.json