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

Question

父自定义元素中有两个子自定义元素.我不知道它是否可能,但我想要实现的是当"值"改变,并且"prop"因绑定而改变时,我需要"feat1"来相应地改变,等于"prop"的值".

父元素:

<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>

这是插件

Answer 1

你当然可以.您的代码存在一些问题:

1. 从父元素,结合prop在<first-child>和feat1中<second-child>的相同value.
2. 使用对象中observer定义的properties用于侦听更改.
3. 设置<first-child>为从子级到父级的单向绑定.
4. 设置<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

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