퓨즈[Fusetools] 문서[Docs] 번역

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. 옵저버블[Observables]
  4. 패턴[Patterns]

패턴[Patterns]

비동기 맵(Asynchronous Map)

Observable 도메인을 종료하지 않고 Observable 변경 값에 대한 응답으로 비동기적으로 데이터를 가져와야 하는 경우가 있습니다. 우리는 map()과 inner()의 조합을 사용하여 우아한 방법으로 이 작업을 수행할 수 있습니다.

아래 예제에서, 우리는 입력된 Observable의 각 아이템(이 경우 하나)을 매핑(map 함수)하고, Observable을 반환합니다. Observable은 가져온 데이터를 사용할 수 있게 되면 업데이트할 Observable을 반환합니다. 이것은 우리의 미래 데이터를 관찰할 수 있는 Observable을 가져올 것입니다 – 거의 우리가 원하는 것. 그러므로 우리는 inner()를 사용하여 외부의 위치 대신 Observable 내부를 “unwrap”합니다, 그리고 짜잔! 우리는 입력이 변경될 때마다 비동기적으로 가져온 데이터로 업데이트될 Observable로 끝납니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
var inputUrl = Observable("https://example.com/");

var output = inputUrl.map(function(url) {
    var resultObservable = Observable("Placeholder value");

    fetch(url)
        .then(function(response) { return response.text(); })
        .then(function(result) {
            resultObservable.value = result;
        });

    return resultObservable;
}).inner();

Observable을 사용하여 뷰 모델 정의하기

Observable API를 사용하면 데이터에서 복잡한 변형을 쉽게 수행할 수 있으므로 뷰 모델을 정의하는 좋은 방법입니다. 뷰 모델은 원래의 데이터 모델에서 특정 화면에 표시하기에 적합한 모델로 매핑하는 것입니다. 이를 통해 동일한 데이터를 다르게 저장하지 않고도 다양한 방식으로 볼 수 있습니다.

Observable 조건

Observable 조건에 따라 목록을 필터링하려면 .flatMap과 .where의 조합을 사용하십시오.

1
2
3
var items = conditionObservable.flatMap(function(v) {
    return itemsObservable.where(function(x) { return v != x; });
});
Was this article helpful to you? Yes No

How can we help?