同级自定义元素之间的数据绑定

Question

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

parent-element:

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

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

second-child:

<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

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

从父元素，将 <first-child> 中的 prop 和 <second-child> 中的 feat1 绑定到相同的 value。
使用 properties 对象中定义的 observer 来监听变化。
将 <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>

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

让我知道这是否是您要实现的正确行为。

同级自定义元素之间的数据绑定

Data binding between sibling custom elements

javascript

polymer