从父聚合物元素继承(聚合物1.0)

Question

我使用的是聚合物1.0。我有一个聚合物dom模块：

<parent-node></parent-node>

我正在用我自己的另一个单独的聚合物dom模块填充节点：

<parent-node>
  <child-node></child-node>
</parent-node>

现在，我想在父节点上设置一个布尔属性，它可以使子节点读取并做出反应。但是，当聚合元素从子节点渲染到父节点时，子节点是否可以从父节点读取布尔值dark设置为true的父节点？：

<parent-node dark>
  <child-node></child-node> <!-- Can it read from the parent? -->
</parent-node>

我希望使用一种{{dark}}绑定的方式。父级是否可以发布到子级？

另一种我认为可能实现这一点的方法是通过<child-node> dom-module模板中的CSS。:host很棒，但是有没有办法让我达到:host的parent呢？所以它可能类似于(psuedo代码)：

:parent[dark] :host {
   background: #000;      
}

或者，在<parent-node>中是否有一种方法可以命中<content></content>的特定子项。也许聚合物允许穿透<content>的容器以命中特定的类或ids？

有人能帮上忙吗？我目前的实现需要父对象将布尔属性分配给子对象，但我觉得这完全破坏了Polymer的模板和绑定功能的优势……

Answer 1

在每个元素上创建一个布尔属性并绑定它们应该不会有任何问题。例如：

<parent-node dark="{{darkValue}}>
  <child-node dark="{{darkValue}}"/>
  <div>{{darkValue}}</div>
<parent-node>

如果"dark“属性将其通知标志设置为true，则这将是一个双向绑定-对其中一个属性的更改将通知另一个。

这里有两个可供实验的元素。在任何一个中激活计时器，暗值都会按预期在父对象和子对象中切换。

Polymer({
  is: 'parent-node',

  properties: {
    dark: {
      type: Boolean,
      notify: true,
      observer: 'log'
    }
  },

  ready: function() {
    var me = this;
    // ACTIVATE THIS TIMER, OR THE CHILD TIMER
    //setInterval(function() {me.dark = !me.dark}, 2000);
  },

  log: function (newVal, oldVal) {
    console.log('parent', newVal);
  }
});

Polymer({
  is: 'child-node',

  properties: {
    dark: {
      type: Boolean,
      notify: true,
      observer: 'log'
    }
  },

  ready: function() {
    var me = this;
    // ACTIVATE THIS TIMER, OR THE PARENT TIMER
    setInterval(function() {me.dark = !me.dark}, 2000);
  },

  log: function (newVal, oldVal) {
    console.log('child', newVal);
  }
});

我不认为有任何简单的方法可以通过绑定到单个parent属性来通知特定的子对象。为此，您可能需要使用dom查询来访问您感兴趣的子项，并直接调用它们(即直接设置它们的暗属性)。

编辑:内容中的绑定。

这也行得通：

<dom-module id="parent-node">
  <style>
    :host {
      display: block;
    }
  </style>

  <template>
    <content></content>
  </template>
</dom-module>

..。并将以下内容添加到html中：

   <parent-node dark="{{darkValue}}">
          <div>dark value of content in parent-node is <span>{{darkValue}}</span></div>
   </parent-node>

父节点的内容中的{{darkValue}}最初是空的，但随后每次父节点切换暗值时都会更新。所以看起来darkValue是绑定到父节点内容的。