javascript - 同级自定义元素之间的数据绑定(bind)

Question

父自定义元素中有两个子自定义元素。我不知道这是否可能，但我想要实现的是当“值(value)”发生变化时，并且“prop”由于绑定(bind)而发生变化，我需要“feat1”相应地改变等同于“prop”的值(value)”。

父元素:

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

第一个 child :

<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

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

1. 从父元素绑定(bind)prop在<first-child>和 feat1在<second-child>同样value .
2. 使用observer在 properties 中定义对象来监听变化。
3. 设置<first-child>成为从 child 到 parent 的单向绑定(bind)。
4. 设置<second-child>成为从 parent 到 child 的单向绑定(bind)。

综合起来:

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

笨蛋:http://plnkr.co/edit/pONoTxdCDn6jj5axoap1?p=preview

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