javascript - 如何获取Polymer domHost属性？

Question

我有一个结构非常简单的基本 polymer 模板，如下所述: Polymer: can't get this.__data__ passing in from host (代码库在这里:https://srgg6701.github.io/Polymer_template) 我需要使用从 parent 传递给 child 的数据。我可以传递它们并在 this.domHost 中查看它:

但是，如果我尝试获取 this.domHost.properties，它会显示 undefined (!)。

那么，有两个问题:

1. 为什么这里没有定义？
2. 是否可以让这些数据可供访问？

Answer 1

对于问题#1:它很可能是就绪事件之前元素的副本，这就是它未定义的原因。大多数情况下您应该使用Polymer DOM API在 DOM 中进行操作。主机对象应在: Polymer.dom(this).getOwnerRoot().host 中可用

对于问题#2:使用 Polymer Data Binding对于此类工作您想要实现的目标。您仍然可以使用this.policies在父元素中，但数据绑定(bind)器将向子元素提供信息，并且所有内容都将被同步和处理。

对于数据绑定(bind)，将属性添加到 x-comphost和x-child元素:

properties: {
    data: {
        type: Object,
        value: null, // Default Value

        // Fire value-changed Event when changed
        // so the elements and the data binding
        // will react to that.
        notify: true

        // (optional) Listener for the property changing
        // if your want to make custom logic
        observer: '_doSomething' 
    }
}

并在模板中添加如下属性:<x-child data="{{data}}"></x-child>

使用更多元素，您可以制作 Behavior它可以包含属性和观察者详细信息，您不需要复制粘贴到每个元素，但如果需要，您可以覆盖:

var MyDataBehavior = {
    properties: {
        data: {type:Object, notify:true, observer: '_dataChanged'}
    },
    dataChanged: function( data ) { /* ... */ }
};

添加行为输入后，只需将其添加到元素定义中即可:

//...
behaviors: [MyDataBehavior],
//...

Shadow DOM 类似于一个封闭的城堡，你无法从里面进出，你必须 build 桥梁让人们进出。

Monica Dinculescu (from Google Polymer team):

Make bridges instead of dragons to enter the Shadow DOM castle!

最终，您可以将数据添加到全局范围中，并且可以访问它，因为窗口对象是共享的，而不是原始对象的某种副本。