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

Question

我正在使用 Polymer 1.0。我有一个 Polymer dom 模块：

<parent-node></parent-node>

我正在用我自己的另一个单独的 Polymer dom-module 填充节点：

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

现在我想在父节点上设置一个布尔属性，可以使子节点读取并做出反应。但是由于 Polymer 元素首先从子节点渲染到最后父节点，子节点是否可以从父节点读取它的布尔值 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 吗？所以它可能类似于（伪代码）：

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

或者，<parent-node> 中可能有一种方法可以攻击<content></content> 的特定子代。也许 Polymer 允许穿透<content> 的容器以命中特定的类或 id？

有人可以帮忙吗？我当前的实现需要父级为子级分配布尔属性，但我觉得这完全违背了 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);
  }
});

我认为没有任何简单的方法可以通过绑定到单个父属性来通知特定子级。为此，您可能需要使用 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 似乎绑定到父节点内容。