폴리머-데이터 시스템

Polymer를 사용하면 다음과 같은 다른 작업을 수행하여 요소의 속성에 대한 변화를 관찰 할 수 있습니다.

Observers − 데이터가 변경 될 때마다 콜백을 호출합니다.
Computed Properties − 다른 속성을 기반으로 가상 속성을 계산하고 입력 데이터가 변경 될 때마다 다시 계산합니다.
Data Bindings − 데이터가 변경 될 때마다 주석을 사용하여 DOM 노드의 속성, 속성 또는 텍스트 내용을 업데이트합니다.

데이터 경로

Path범위에 상대적인 속성 또는 하위 속성을 제공하는 데이터 시스템의 문자열입니다. 범위는 호스트 요소가 될 수 있습니다. 데이터 바인딩을 사용하여 경로를 다른 요소에 연결할 수 있습니다. 요소가 데이터 바인딩으로 연결된 경우 데이터 변경을 한 요소에서 다른 요소로 이동할 수 있습니다.

예

<dom-module id = "my-profile">
   <template>
      . . .
      <address-card address="{{myAddress}}"></address-card>
   </template>
   . . .
</dom-module>

위의 두 경로 (my-profile 및 address-card)는 <address-card>가 <my-profile> 요소의 로컬 DOM에있는 경우 데이터 바인딩과 연결될 수 있습니다.

다음은 Polymer.js의 특별한 유형의 경로 세그먼트입니다.

와일드 카드 (*) 문자는 경로의 마지막 세그먼트로 사용할 수 있습니다.
배열 변형은 문자열 스플 라이스를 경로의 마지막 세그먼트로 배치하여 지정된 배열에 표시 할 수 있습니다.
배열 항목 경로는 배열의 항목을 나타내고 숫자 경로 세그먼트는 배열 인덱스를 지정합니다.

데이터 경로에서 각 경로 세그먼트는 속성 이름이며 다음 두 종류의 경로를 포함합니다.

점으로 구분 된 경로 세그먼트입니다. 예 : "apple.grapes.orange".
문자열 배열에서 각 배열 요소는 경로 세그먼트 또는 점선 경로입니다. 예 : [ "apple", "grapes", "orange"], [ "apple.grapes", "orange"].

데이터 흐름

예

다음 예제는 데이터 흐름의 양방향 바인딩을 지정합니다. index.html 파일을 만들고 다음 코드를 추가합니다.

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "my-element.html">
   </head>
   
   <body>
      <my-element></my-element>
   </body>
</html>

이제 my-element.html이라는 다른 파일을 만들고 다음 코드를 포함합니다.

<link rel = "import" href = "bower_components/polymer/polymer-element.html">
<link rel = "import" href = "prop-element.html">

//it specifies the start of an element's local DOM
<dom-module id = "my-element">
   <template>
      <prop-element my-prop="{{demoProp}}"></prop-element>
      <p>
         Present value: <span>{{demoProp}}</span>
      </p>
   </template>
   
   <script>
      Polymer ({
         is: "my-element", properties: {
            demoProp: String
         }
      });
   </script>
</dom-module>

다음으로 prop-element.html이라는 파일을 하나 더 만들고 다음 코드를 추가합니다.

//it specifies the start of an element's local DOM
<dom-module id = "prop-element">
   <template>
      <button on-click = "onClickFunc">Change value</button>
   </template>
   
   <script>
      Polymer ({
         is: "prop-element", properties: {
            myProp: {
               type: String,
               notify: true,
               readOnly: true,
               value: 'This is initial value...'
            }
         },
         onClickFunc: function(){
            this._setMyProp('This is new value after clicking the button...');
         }
      });
   </script>
</dom-module>

산출

이전 장에 표시된대로 응용 프로그램을 실행하고 http://127.0.0.1:8081/. 다음은 출력입니다.

버튼을 클릭하면 다음 스크린 샷과 같이 값이 변경됩니다.

두 경로 연결

linkPaths 메서드를 사용하여 두 경로를 동일한 개체에 연결할 수 있으며 데이터 바인딩을 사용하여 요소간에 변경 사항을 생성해야합니다.

예

linkPaths('myTeam', 'players.5');

경로 연결은 아래와 같이 unlinkPaths 메서드를 사용하여 제거 할 수 있습니다.

unlinkPaths('myTeam');

관찰자

요소의 데이터에 발생하는 관찰 가능한 변경은 관찰자라고하는 메서드를 호출합니다. 다음은 관찰자의 유형입니다.

간단한 관찰자는 단일 속성을 관찰하는 데 사용됩니다.
복잡한 관찰자는 둘 이상의 속성 또는 경로를 관찰하는 데 사용됩니다.

데이터 바인딩

데이터 바인딩을 사용하여 로컬 DOM의 호스트 요소에서 요소의 속성 또는 속성을 연결할 수 있습니다. 다음 코드와 같이 DOM 템플릿에 주석을 추가하여 데이터 바인딩을 만들 수 있습니다.

<dom-module id = "myhost-element">
   <template>
      <target-element target-property = "{{myhostProperty}}"></target-element>
   </template>
</dom-module>

로컬 DOM 템플릿의 데이터 바인딩 구조는 다음과 같습니다.

property-name=annotation-or-compound-binding

또는

attribute-name$=annotation-or-compound-binding

바인딩의 왼쪽은 대상 속성 또는 특성을 지정하고 바인딩의 오른쪽은 바인딩 주석 또는 복합 바인딩을 지정합니다. 바인딩 주석의 텍스트는 이중 중괄호 ({{}}) 또는 이중 대괄호 ([[]]) 구분 기호로 묶여 있으며 복합 바인딩에는 하나 이상의 문자열 리터럴 바인딩 주석이 포함됩니다.

다음은 데이터 바인딩 사용 사례와 함께 사용되는 도우미 요소입니다.

Template Repeater − 템플릿 내용의 인스턴스는 배열의 각 항목에 대해 생성 될 수 있습니다.
Array Selector − 구조화 된 데이터 배열에 대한 선택 상태를 제공합니다.
Conditional Template − 조건이 참이면 내용을 확인할 수 있습니다.
Auto-binding Template − 폴리머 요소 외부의 데이터 바인딩을 지정합니다.

도우미 요소가 DOM 트리를 업데이트하는 경우 DOM 트리는 dom-change 이벤트를 트리거합니다. 때로는 생성 된 노드와 상호 작용하는 것이 아니라 모델 데이터를 변경하여 DOM과 상호 작용할 수 있습니다. 따라서 dom-change 이벤트를 사용하여 노드에 직접 액세스 할 수 있습니다.