自定義聚合物元素中的雙向綁定步驟

Question

我想模塊化我的代碼部分。我創建了一個自定義元素來處理數組和數字。雙向綁定這不應該是一個問題。它是。看起來好像孩子在準備好之前就獲得了財產。

<link rel="import" href="custom-element.html"> 

<dom-module id="is-parent"> 
    <custom-element p1="{{p1}}"></custom-element> 
    <script> 
     Polymer({ 
      is: 'is-parent', 
      properties: { 
       p1:{ 
        type: Number, 
        notify: true, 
        observer:"obsParent", 
        value:0, 
       }, 
      }, 
      obsParent: function(newValue, oldValue) { 
       console.log(oldValue); 
       console.log(newValue); 
       console.log(this.p1); 
      }, 
      ready: function(){ 
       this.p1= 0; 
      }, 
    </script> 
</dom-module> 


<dom-module id="is-child"> 

    <script> 
     Polymer({ 
      is: 'is-child', 
      properties: { 
       p1:{ 
        notify: true, 
        observer:"obsChild", 
       }, 

       p2:{ 
        type: Boolean, 
        computed: 'p2Computer(p1)', 
       }, 

      }, 
      obsChild: function(newValue, oldValue) { 
       console.log(oldValue); 
       console.log(newValue); 
       console.log(this.p1); 
      }, 

      p2Computer:function(p1){ 
       if(p1===0){ 
        return true; 
       } 
       return false; 
      }, 
      ready: function(){ 
       console.log(this.p1); 
      }, 
    </script> 
</dom-module> 

我的雙向綁定屬性在child中設置爲undefined，在parent中設置爲0。這個例子非常簡單，但我的測試支持我的聲明，即孩子在父類中設置爲0時，會得到一個未定義的屬性。

Answer 1

由於某種原因，您有prop1作爲正在編輯的屬性，但它應該是p1如果您希望它綁定到is-child的p1。

<custom-element prop1="{{p1}}"></custom-element> 

到

<custom-element p1="{{p1}}"></custom-element>