Question

父自定义元素中有两个子自定义元素。我不知道它是否可能，但我想要实现的是＆＃34;值＆＃34;变化，＆＃34; prop＆＃34;由于绑定的变化，我需要＆＃34; feat1＆＃34;相应地改变等于＆＃34; prop＆＃34;的价值。

父元素：

<dom-module id="parent-element">
  <template>
    <first-child prop={{value}}></first-child>
    <second-child feat1={{prop}}></second-child>
      In parent-element
      <h1>{{value}}</h1>
  </template>
  <script>
    Polymer({
      is: "parent-element",
      properties: {
        value: {
          type: String
        }
      },
      valueChanged:function(){
        console.log("value changed");
      }
    });
  </script>
</dom-module>

第一子：

<dom-module id="first-child">
  <template>
    <p>first element.</p>
    <h2>{{prop}}</h2>
  </template>
  <script>
    Polymer({
      is: "first-child",
      properties:{
        prop:{
          type:String,
          notify:true
        }
      },
        ready:function(){
          this.prop = "property"; //this is just example, in reality it gets data from elsewhere
        }
    });
  </script>
</dom-module>

第二子：

<dom-module id="second-child">
  <template>
    <p>Second element.</p>
    <h2>{{feat1}}</h2>
  </template>
  <script>
    Polymer({
      is: "second-child",
      properties:{
        feat1:{
          type:String,
          notify:true,
          value:"initial value"
        }
      },
        ready:function(){
         this.addEventListener("feat1-changed",this.myAct);
        },
        myAct:function(){
          console.log("feat1-changed ",this.feat1);
        }
    });
  </script>
</dom-module>

以下是plunk

Answer 1

当然可以。您的代码存在一些问题：

从父元素中，将prop中的<first-child>和feat1中的<second-child>绑定到同一value。
使用observer对象中定义的properties来监听更改。
将<first-child>设置为从子级到父级的单向绑定。
将<second-child>设置为从父级到子级的单向绑定。

全部放在一起：

<parent-element>：

<dom-module id="parent-element">

  <template>
    <first-child prop={{value}}></first-child>
    <second-child feat1=[[value]]></second-child>

    <div>parent-element: <b><span>[[value]]</span></b></div>
    <div id="log"></div>

  </template>

  <script>
    Polymer({
      is: "parent-element",
      properties: {
        value: {
          type: String,
          observer: "valueChanged"
        }
      },
      valueChanged: function (n, o) {
        var el = document.createElement("div");
        el.innerHTML = "value changed in parent from "+o+" to "+n;
        Polymer.dom(this.$.log).appendChild(el);
      }

    });
  </script>

</dom-module>

<first-child>：

  <template>
    <div>first-child: <b><span>{{prop}}</span></b>
      <button on-tap="btnTapped">change 'prop' inside first-child</button>
    </div>
  </template>

  <script>
    Polymer({
      is: "first-child",
      properties:{
        prop:{
          type:String,
          notify:true,
          value: "first_child_default"
        }
      },
      btnTapped: function () {
        this.prop = Math.random().toString(36).substring(7);
      }
    });
  </script>

</dom-module>

<second-child>：

<dom-module id="second-child">
  <template>
    <div>second-child: <b><span>{{feat1}}</span></b></div>
    <div id="log"></div>
  </template>

  <script>
    Polymer({
      is: "second-child",
      properties:{
        feat1:{
          type:String,
          value:"second_child_default", // you should never see this since default value is passed in from parent
          observer: "feat1Changed"
        }
      },
      feat1Changed: function(n, o) {
        var el = document.createElement("div");
        el.innerHTML = "feat1 changed in second-child from "+o+" to "+n;
        Polymer.dom(this.$.log).appendChild(el);
      }
    });
  </script>
</dom-module>

Plunker：http://plnkr.co/edit/pONoTxdCDn6jj5axoap1?p=preview

如果这是您正在尝试实现的正确行为，请告诉我。

兄弟自定义元素之间的数据绑定

1 个答案: