如何获得 Polymer domHost 属性? [英] How to get Polymer domHost property?

问题描述

我有一个结构非常简单的基本 Polymer 模板，描述如下:

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

那么，两个问题:

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

解决方案

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

对于问题#2: 使用 聚合物数据绑定对于这种工作你想要实现的.您仍然可以在父元素中使用 this.policies，但数据绑定器会将信息提供给子元素，所有内容都将被同步和处理.

对于数据绑定，为您的 x-comphost 和 x-child 元素添加一个属性:

属性:{数据: {类型:对象，value: null,//默认值//更改时触发 value-changed 事件//所以元素和数据绑定//会对此做出反应.通知:真实//(可选)属性更改的监听器//如果你想制作自定义逻辑观察者:'_doSomething'}}

然后在他们的面板中添加这样的属性:<x-child data={{data}}"></x-child>

使用更多元素，您可以制作一个行为，其中可以包含属性和观察者详细信息，您无需复制粘贴到每个元素，但您可以根据需要进行覆盖:

var MyDataBehavior = {特性: {数据:{类型:对象，通知:真，观察者:'_dataChanged'}},数据更改:函数(数据){/* ... */}};

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

//...行为:[MyDataBehavior]，//...

Shadow DOM 就像一个封闭的城堡，里面不能进出，必须搭建桥梁让人们进出.

<块引用>

Monica Dinculescu(来自 Google Polymer 团队):

建造桥梁而不是龙进入 Shadow DOM 城堡！

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

I have a basic Polymer template with a very simple structure, described here: Polymer: can't get this.__data__ passing in from host (codebase is here: https://srgg6701.github.io/Polymer_template) I need to use data passed from parent to children. I can pass them and see it within this.domHost:

However, if I try to get this.domHost.properties, it says undefined (!).

So, two questions:

1. Why it is undefined here?
2. Is it possible to make this data accessible?

解决方案

For Question#1: It's most likely copy of the element before the ready event, thats why it is undefined. Most of the cases you should use the Polymer DOM API to manipulate in the DOM. The Host Object should be available in: Polymer.dom(this).getOwnerRoot().host

For Question#2: Use Polymer Data Binding for this kind of job what you want achieve. You can still use the this.policies in the parent element, but the Data Binder will give information to the child elements and everything will be synchronized and handled.

For the data binding, add a property to your x-comphost and x-child element:

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' 
    }
}

And in themplate add the attribute like this: <x-child data="{{data}}"></x-child>

With more elements you can make a Behavior which can contain the property and the observer details and you not need to copy-paste to every element but you can override if you want:

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

After you added the behavior input then just add it to your element definition:

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

Shadow DOM is similar a closed Castle where you cannot enter or leave from inside, you have to build bridges to let peoples in and out.

Monica Dinculescu (from Google Polymer team):

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

Ultimatley you can add your data into the global scope and you can reach it, because the window object is shared, not some kind of copy of the original one.

这篇关于如何获得 Polymer domHost 属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！