Polymer 中的跨 DOM 观察者答案

【问题标题】：Cross-DOM observers in PolymerPolymer 中的跨 DOM 观察者
【发布时间】：2015-11-30 21:06:51
【问题描述】：

我在 Polymer 中为 i18n 开发了一个组件。它基于<iron-localstorage> 存储和更改语言环境。

<iron-localstorage name="marvin-locale-ls"
                           value="{{locale}}"
                           on-iron-localstorage-load-empty="initializeDefaultLocale"
        ></iron-localstorage>
<script>

    MarvinLocaleLS = Polymer({
        is: 'marvin-locale-ls',

        properties: {
            locale: {type: String},
            ...

我还有一个翻译器组件，可以根据这个语言环境进行翻译。我想做这样的事情：

<script>
        Polymer({
            is: 'marvin-translate',
            ls: new MarvinLocaleLS(),
            properties: {
                key: {
                    type: String,
                    notify: true
                },
                locale: {
                    type: Polymer.dom().querySelector('marvin-locale-ls').properties.locale,
                    observer: '_localeObserver'
                }
            },

            ready: function(){
                this.key = this.textContent;
                var t = this.ls.getTranslation(this.key); // get translation from Local Storage
                this.textContent = (t) ? t : this.key; // show translation or key if there is no translation
            },
            _localeObserver: function(){
                console.log('locale changed')
            }

        });


    </script>

换句话说，我想在“marvin-translate”中为“marvin-locale-ls”中的属性创建观察者。有可能吗？

【问题讨论】：

从 locale 传入“marvin-translate”，这是一个在“m-translate”中注册为可观察的可观察属性。请参阅有关属性和数据绑定的 1.0 文档。
它们在不同的文件中，所以恐怕绑定无济于事
github.com/googlecast/cast-controller-bar-polymer/blob/master/… 查看绑定到 [[local-media]] 并注意项目中的 3 或 4 个其他文件也绑定到相同的属性、全局值或传递的类似内容到项目中的许多 diff 聚合物文件中
github.com/googlecast/cast-video-polymer/blob/master/… 同一个项目也绑定到同一个变量

标签： javascript polymer web-component

【解决方案1】：

看看这个组件，它可以让你在 Key/Value 的基础上共享变量并在任何你想要的地方访问它们。它还支持数据绑定（iron-meta 尚不支持）：https://github.com/akc42/akc-meta

【讨论】：