폴리머 배열을 바인딩하고 하위 구성 요소의 변경 내용을 감지합니다.

Question

배열 속성이 속성 인 Polymer의 구성 요소가 있습니다.

그런 다음이 배열을 전달하는 하위 구성 요소가 있습니다. 내가 뭘 하려는지 그 하위 구성 요소에서 해당 배열의 변화를 감지하는 것입니다. 여기

는 부모 구성 요소입니다

<dom-module id="some-test"> 

    <template> 

    <paper-input label="Let's update param" on-input="updateParam"></paper-input> 
    <some-child param={{param}}></some-child> 

    </template> 

    <script> 
    Polymer({ 
     is: 'some-test', 
     properties: { 
      param: {type: Array, value: []} 
     }, 
     updateParam: function(e) { 
     this.param["test"] = e.currentTarget.value; 
     console.log("Param has been updated"); 
     } 
    }); 
    </script> 

</dom-module> 

그리고 여기에 하위 구성 요소입니다 : 나는 (첫 번째 구성 요소에서) 입력 필드에 뭔가를 입력 할 때, 나는 얻을, 그래서

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

    <template> 
     <div>the child component</div> 
    </template> 

    <script> 
    Polymer({ 
     is: 'some-child', 
     properties: { 
     param: {type: Array, observer: "doSomething"}, 
     }, 
     doSomething: function() { 
     console.log("ah, we've detected a change in param"); 
     }, 
    }); 
    </script> 

</dom-module> 

Param의 consolge log가 업데이트되었습니다. 문제 없다.

하지만 param을 자식 구성 요소로 전달해야합니다.이 구성 요소는 변경 내용을 감지하고 "아아, 변경 사항을 감지했습니다."

그러나 이것은 발생하지 않습니다. 배열 대신 문자열을 사용하면 의도 한대로 작동합니다. 그러나 배열이고 값 중 하나를 업데이트하면 자식 구성 요소가 변경 사항을 적용하지 않습니다.

이렇게하면 배열을 바인딩하는 방법에 대해 뭔가 빠져 있다고 생각됩니다. 모든 단서?

Answer 1

아, 나는 마침내 작업있어! 다양한 답이 결합되었습니다.

부모 요소 : 여기

<dom-module id="some-test"> 

    <template> 

    <paper-input label="Let's update param" on-input="updateParam"></paper-input> 
    <some-child param={{param}}></some-child> 

    </template> 

    <script> 
    Polymer({ 
     is: 'some-test', 
     properties: { 
      param: {type: Array, value: []} 
     }, 
     updateParam: function(e) { 
     this.set("param.test", e.currentTarget.value); <!-- this is the first trick --> 
     console.log("Param has been updated"); 
     } 
    }); 
    </script> 

</dom-module> 

을 그리고 하위 구성 요소입니다 : 여기에 작동 최종 코드는 그래서

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

    <template> 
     <div>the child component</div> 
    </template> 

    <script> 
    Polymer({ 
     is: 'some-child', 
     properties: { 
     param: {type: Array}, 
     }, 
     observers: [ 
     "doSomething(param.*)" 
     ] 
     doSomething: function() { 
     console.log("ah, we've detected a change in param"); 
     }, 
    }); 
    </script> 

</dom-module> 

, 내가하는 데 필요한 두 가지였다 : 1) "this.set()"을 사용하여 부모 구성 요소에있는 객체의 값을 업데이트하십시오. 2) 하위 구성 요소에서 복잡한 관찰자를 사용하십시오.

Answer 2

당신은 자식 요소에 복잡한 관찰자를 사용할 수 있습니다

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

    <template> 
     <div>the child component</div> 
    </template> 

    <script> 
    Polymer({ 
     is: 'some-child', 
     properties: { 
     param: {type: Array, observer: "doSomething"}, 
     }, 

     //Here add complex observers 
     observers: ['doSomething(param.*)', 'doSomething(param.splices)'], 

     doSomething: function() { 
     console.log("ah, we've detected a change in param"); 
     }, 
    }); 
    </script> 

</dom-module>