polymer data binding - Observable changes

polymer 를 사용하여 data binding 을 하면 쉽게 data 를 UI 로 변경할 수 있다.

이후 binding 된 데이터를 변경하거나 새로운 데이터를 바인딩하여 UI 변경을 하려 할때 제대로 동작을 하지 않아 property 를 이용한 꼼수등을 쓰곤했다.

polymer 에서는 observable changes 란 것이 있어 polymer 가 인식 할 수 있는 방식으로 data 변경을 해주는 방법이 있다.

<template is="dom-repeat" items="{{employees}}">
        <div># <span>{{index}}</span></div>
        <div>First name: <span>{{item.first}}</span></div>
        <div>Last name: <span>{{item.last}}</span></div>
</template>

위와 같이 바인딩된 상태에서 새로운 data 를 할당하거나 기존 데이터를 변경할 때,

// unobservable subproperty change
this.address.street = 'Elm Street';

// unobservable change using native Array.push
this.users.push({ name: 'Maturin});

와 같은 방식을 사용하게 되면 polymer 의 data binding 이 제대로 동작하지 않는다.

대신,

// mutate an object observably
this.set('address.street', 'Half Moon Street');

// mutate an array observably
this.push('users', { name: 'Maturin'});

와 같이 하게되면 정상적으로 binding 된 데이터 변경을 UI 에 반영하게 된다.

그리고 외부 라이브러리를 사용하거나 하여 위와 같은 뭄법을 쓸수 없을 경우에는 notifyPath 나 notifySplices 를 사용하여 명시적으로 변경된 경로를 알려줌으로써 강제로 변경 통지를 할 수 있다.

// Notify Polymer that the value has changed
this.notifyPath('address.street');

출처

https://www.polymer-project.org/1.0/docs/devguide/data-system#observable-changes