Polymer 1.0 行为更改未传播

Question

我正在尝试自定义 i18n 行为（目前没有适合我需要的 i18n 组件，我检查了 i18n-msg、i18n-next 一些在 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 和 i18nEN 是包含翻译的 JsonObject。

当我点击“DE”时，会调用 _onChangedLocale，Polymer.I18n.translation 会更新，但不会像什么都没发生一样保持他的第一个值。

我错过了什么吗？聚合物文档谈到“notifyPath”，但我不明白如何在我的情况下使用它

解决方案： 问题在于生命周期。 Polymer 在组件属性初始化之前评估 dom 和数据绑定...当您使用 this.my-prop 时，您会收到错误消息，指出您的属性未定义（如果您没有使用“创建”回调）。或者像我一样，它只是第一次起作用，但改变永远不会得到回报。

它绝对没有记录，也没有看到关于它的其他信息，但为了摆脱它，我给我的 [[i18n('hello')]] => [[i18n('hello',翻译）]]。函数 i18n 仍然只接受参数，但是这样做，您告诉聚合物该函数使用属性“翻译”，允许他更改生命周期并在属性初始化后评估表达式。现在它按预期工作......

Answer 1

感谢您的回答，不幸的是这是我的第一次尝试（基于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',word)]]。

我的函数“expr”不接受第二个参数，你猜怎么着。如果我像 [[expr('toto')]] 那样删除它，它就不再起作用了（无法读取未定义的属性 'toto'）！！ oO

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

Answer 2

我强烈建议您拥有自己的命名空间而不是使用 Polymer。 如果现在不存在，请在您的行为定义中添加对 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;
        }