OBSERVABLE 객체

Observable 객체

Observable은 FuseJS 어플리케이션의 아주 중요한 모듈입니다. Observable은 반응형과 비동기 프로그래밍을 처리합니다.
또한, Observable은 퓨즈에서 UX와 자바스크립트간의 데이터 바인딩에 주로 사용됩니다.

Observable은 단일 값 또는 여러개의 요소를 포함한 리스트를 가질 수 있습니다. Observable의 value 속성이 변경되면 바인딩 된 영역에 그 값을 자동으로 통지합니다.

Observable로 데이터 주도형 UI 프로그래밍을 쉽게 구현하세요.

모듈을 참조하는 방법

1
var Observable = require('FuseJS/Observable');

기본적인 사용법

Observable 객체는 0 또는 여러개의 값을 이용해 Observable 함수를 호출하는 것으로 생성됩니다.

Observable(초기값) – 생성자

예제:

1
2
var emptyObservable = Observable();
var isSomethingEnabled = Observable(true);

빈 observable 객체의 .value는 undefined이고, .length는 0입니다.

Observable의 value 속성

만약 observable이 하나의 값을 가지고 있다면, .value 속성을 이용해 값이 변경거나 가져올 수 있습니다:

1
2
3
var someString = Observable('foobar');
Console.Log(someString.value); // 'foobar'
someString.value = 'barfoo'; // 값 설정

.value가 변경되면 바인딩 된 속성들에 자동으로 통지합니다.

리스트형 Observable

observable을 리스트 형태로 이용하려면, .add(item)와 .remove(item) 같은 메소드를 이용하면 됩니다. 또한, 갯수를 알아내기 위해 .length 속성도 이용할 수 있습니다:

1
2
3
4
5
var friends = Observable('Jake', 'Jane', 'Joe');
Console.Log(friends.length); // 3

friends.add('Gina');
Console.Log(friends.length); // 4

Observable의 데이터 타입

Observable은 모든 기본적인 데이터 타입(number, string, boolean, array)을 지원합니다:

1
2
3
var obsNumber = Observable(10.5);// number
var obsString = Observable("hello");// string
var obsBool = Observable(true);// boolean

배열도 사용할 수 있습니다:

1
2
var obsRedColor = Observable([1,0,0,1]);
var obsWhiteAndBlack = Observable([1,1,1,1], [0,0,0,1]);

Observable의 놀랍고 재밌는 점

열마디 말보다 한 줄의 코딩이 낫죠.

예제:

1
2
3
4
5
6
var firstName = Observable('John');
var lastName = Observable('Doe');

var fullName = Observable(function() {
    return firstName.value + ' ' + lastName.value;
})

firstName 또는 lastName이 변경되면, fullName이 자동으로 업데이트 됩니다.

완전 마법같죠? 🙂

[[ 동영상 강좌(재생 목록 버튼을 누르세요) ]]

Was this article helpful?

Related Articles