Question

我正在使用Polymer 1.0。我有一个Polymer dom-module：

<parent-node></parent-node>

我正在使用另一个独立的Polymer dom模块填充节点：

<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很棒，但有没有办法让我点击parent的{{1}}？所以它可能有点像（伪代码）：

:host

或者，:parent[dark] :host { background: #000; }中是否有一种方法可以击中<parent-node>的特定孩子。也许Polymer允许穿透<content></content>的容器来命中特定的类或ID？

有人可以帮忙吗？我当前的实现需要父级为子级分配布尔属性，但我觉得这完全违背了Polymer的模板和绑定能力的优点......

Answer 1

在每个上创建一个布尔属性并绑定它们应该没有任何问题。 e.g：

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

如果＆＃34;黑暗＆＃34;如果属性将其通知标志设置为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绑定到父节点内容。

继承父聚合物元素（聚合物1.0）

1 个答案: