嵌套聚合物元素之间的数据绑定 [英] Data-binding between nested polymer elements

问题描述

假设我有两个不同的聚合物元素

应该使用 content 占位符。
可以在这两个嵌套的聚合物元素之间进行数据绑定？

One should be embedded inside the other using the content placeholder. Is it possible to do data-binding between these two nested polymer-elements ?

我尝试过，但我无法让它工作： http：/ /jsbin.com/IVodePuS/11/

I tried, but I can't get it to work: http://jsbin.com/IVodePuS/11/

根据 http://www.polymer-project.org/articles/communication.html#binding 聚合物元素之间的数据绑定工作（在这些示例中，他们在模板标签内完成，而不使用内容占位符）。

According to http://www.polymer-project.org/articles/communication.html#binding data-binding between polymer-elements should work (in those examples they were done inside the template tag without using a content placeholder).

Scott Miles澄清说，数据绑定只适用于模板级别。

但是在我的情况下，我不知道确切的模板，但我想允许我的父元素指定应该包含哪个子元素（前提是有不同的 child-elements 。

我认为这个问题与这个问题有关：使用聚合物元素内的light dom中定义的模板

Scott Miles clarified that data-binding only works on the template level.
However in my case I don't know the exact template beforehand but I want to allow the user of my parent-element to specify which child-element it should contain (provided that there are different child-elements.
I think this question is related to this one: Using template defined in light dom inside a Polymer element

我更新了下面的示例来突出显示他的：

I updated the example below to highlight his:

<polymer-element name="parent-element" >
  <template >
    <div>Parent data: {{data1}} </div>
    <content />
  </template>
  <script>
    Polymer('parent-element', {
      data1 : '',
      ready: function() {
        this.data='parent content';
      }
    });

  </script>
</polymer-element>

<polymer-element name="child-element" attributes="data2">
   <template>
    <div>Parent data: {{data2}} </div>
  </template>
  <script>
    Polymer('child-element', {
      data2 : '',
      ready: function() {
      }
    });
  </script>
</polymer-element>

<polymer-element name="child2-element" attributes="data2">
   <template>
    <div>Parent data: {{data2}} </div>
  </template>
  <script>
    Polymer('child2-element', {
      data2 : '',
      ready: function() {
      }
    });
  </script>
</polymer-element>

用户可以选择哪个子元素嵌入：

The user can choose which child-element to embed:

<parent-element data1 = "test">
  <child-element data2="{{data1}}"/>
</parent-element>

<parent-element data1 ="test" >
  <child2-element data2="{{data1}}"/>
</parent-element>

解决方法：

唯一的解决方法发现是添加更改观察器并使用 getDistributedNodes（）获取子元素并手动设置 data2 to data ：

Workaround:

The only workaround I found was to add change watcher and use getDistributedNodes() to get the child element and manually set data2 to data:

<polymer-element name="parent-element" >
  <template >
    <div>Parent data: {{data}} </div>
    <content id="content"/>
  </template>
  <script>
    Polymer('parent-element', {
      data : '',
      ready: function() {
        this.data='parent content';
      },
      dataChanged : function() {
          contents = this.$.content.getDistributedNodes();
          if (contents.length > 0) {
              contents[0].data2 = this.data;
          }
      },
    });

  </script>
</polymer-element>

推荐答案

聚合物数据绑定通过将模型附加到整个子树。

Polymer data-binding works by attaching a model to a whole subtree.

您写道：

<parent-element>
  <child-element data2="{{data}}"/>
</parent-element>

这意味着parentNode提供绑定模型的规则。但现在想象你想写：

this implies a rule that the parentNode provides the binding model. But now imagine you wanted to write:

<parent-element>
  <div>
    <child-element data2="{{data}}"></child-element>
  </div>
</parent-element>

现在您有问题。

相反，在聚合物示例中，您将注意到，模板中的 {{}} （几乎总是）。例如，如果我定义：

Instead, in Polymer examples, you will notice that the {{}} are (almost always) inside of a template. For example, if I define:

<polymer-element name="host-element" attributes="data" noscript>
<template>
  <parent-element data1="{{data}}">
    <child-element data2="{{data}}"></child-element>
  </parent-element>
</template>
</polymer-element>

现在，我有一个模型上下文（ host-element ），我可以用来将模板绑定在整个子树中。

Now, I have a model context (host-element) that I can use to bind things together in the entire subtree described by the template.

请注意，我不需要 attributes =data我补充说，所以host-element公开了数据，我可以这样做：

Note that I don't need attributes="data" for this to work. I added that so host-element exposes data and I can do this:

<host-element data="test"></host-element>  

http ：//jsbin.com/IVodePuS/15/edit

这篇关于嵌套聚合物元素之间的数据绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！