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

问题描述

我有一个基本的Polymer模板，其结构非常简单，如下所述: 聚合物:无法获取此数据.主机(代码库位于此处: https://srgg6701.github.io/Polymer_template ) 我需要使用从父母传递给孩子的数据.我可以通过它们并在this.domHost中看到它:

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:

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

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

因此，有两个问题:

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

推荐答案

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

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

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

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.

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

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

然后在它们中添加如下属性:<x-child data="{{data}}"></x-child>

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类似于封闭的城堡，您无法从内部进入或离开它，而必须建造桥梁让人们进出.

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(来自Google Polymer小组):

用桥梁代替龙来进入Shadow DOM城堡！

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

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屋！