Question

我试图制作我的自定义i18n行为（目前没有适合我需要的i18n组件，我检查i18n-msg，接下来是在stackoverflow上发现的一些自定义实现......）。

它适用于第一页生成，但当我尝试更改语言时，标签不会更新。

这是我的代码：

行为：

var Polymer = Polymer || {};
    /* Defining behavior's */
    Polymer.I18n = Polymer.I18n ||{
        properties: {
            lang: {
                type: String,
                value: "en",
                observer: '_onChangedLocale'
            },
            /** Exposes all translations */
            translation: {
                type: Object,
            }
        },
        created: function() {
            /* Initialisation */
            this._onChangedLocale(Polymer.I18n.lang);
        },
        _onChangedLocale: function(locale) {
            switch(locale) {
                case 'de':
                    Polymer.I18n.translation = i18nDE;
                    break;
                default:
                    Polymer.I18n.translation = i18nEN;
            }
        },
        i18n: function(key) {
            return Polymer.I18n.translation[key] ? Polymer.I18n.translation[key] : key;
        }
}

实现行为的组件：

<dom-module id="my-page">
    <template>
        [[i18n('hello')]]
        <span on-click="onChangeLanguageDEClick">DE</span>
    </template>
    <script>
        Polymer({
            is: "my-page",
            /* use localisation */
            behaviors: [Polymer.I18n],
            onChangeLanguageDEClick:function (event, detail, sender){
                this.lang = 'de';
            },
        });
    </script>
</dom-module>

i18nDE et i18nEN是包含翻译的JsonObject。

当我点击＆＃39; DE＆＃39;，调用_onChangedLocale时，Polymer.I18n.translation会更新，但不会更新＆＃39; [[i18n（＆＃39; hello＆＃39;）]]＆＃39;如果什么也没发生的话，那就是他的第一个价值。

我错过了什么吗？聚合物医生谈论＆＃39; notifyPath＆＃39;但我不明白如何在我的案例中使用它

决议：问题是生命周期。聚合物在组件属性初始化之前评估dom和数据绑定...当你使用this.my时，你得到的错误表明你的属性没有被定义（如果你没有使用＆＃39;创建＆＃39;回调） -支柱。或者像我一样，它只是第一次起作用，但改变永远不会被重新发生。

它绝对没有记录，也没有看到有关它的其他信息，但为了摆脱它，我给我的第二个参数[[i18n（＆＃39; hello＆＃39;）] ] =＆gt; [[I18N（＆＃39;你好＆＃39;，翻译）〕〕。功能i18n仍然只是在论证，但这样做，你告诉聚合物该功能使用一个属性＆＃39;翻译＆＃39;允许他更改生命周期并在属性初始化后评估表达式。现在它按预期工作......

Answer 1

我强烈建议您拥有自己的命名空间，而不是使用Polymer。如果现在不存在，请在行为定义中将polymer.html添加到polymer.html。

尝试进行以下更改，看看是否有效。

    /* Defining behavior's */
    Polymer.I18n = Polymer.I18n ||{
        properties: {
            lang: {
                type: String,
                value: "en",
                observer: '_onChangedLocale'
            },
            /** Exposes all translations */
            translation: {
                type: Object,
            }
        },
        created: function() {
            /* Initialisation */
            this._onChangedLocale(this.lang);
        },
        _onChangedLocale: function(locale) {
            switch(locale) {
                case 'de':
                    this.translation = i18nDE;
                    break;
                default:
                    this.translation = i18nEN;
            }
        },
        i18n: function(key) {
            return this.translation[key] ? this.translation[key] : key;
        }

Answer 2

感谢您的回答，不幸的是，这是我的第一次尝试（基于https://www.polymer-project.org/1.0/docs/devguide/behaviors.html），但它也不起作用。

我孤立了问题（这不是聚合物行为的相对）：

查看我的i18n组件的极简主义代码：

<dom-module id="my-page">
<template>
    [[expr('toto',word)]]
    <span on-click="onClickButton">Change plz</span>
</template>
<script>
    Polymer({
        is: "my-page",
        /* use localisation */
        properties : {
            word: {
                type: Object,
            }
        },
        ready: function() {
            this.onChange('Try it');
        },
        onClickButton:function (event, detail, sender, arg){
            this.onChange('CHANGED !');
        },
        onChange:function (arg){
            var  json = {};
            json.toto = arg;
            this.word = json;
        },
        expr:function(arg) {
            return this.word[arg];
        }
    });
</script>

此代码有效（当我点击'更改plz'时，绑定会按预期更新）但我不明白为什么因为我在这一行上犯了一个错误： [[EXPR（ 'TOTO'，字）〕〕。

我的函数'expr'没有第二个参数，猜猜是什么。如果我像[[expr（'toto'）]]那样删除它，它就不再起作用了（无法读取未定义的属性'toto'）！ OO

有人可以向我解释这种行为然后我可以将它扩展到我的i18n组件吗？

聚合物1.0行为变化不会传播

2 个答案: