UI 구성 요소간에 Knockout JS Observable을 공유하는 방법

UI 구성 요소 속성 을 사용 imports: {}하고exports: {} 공유하는 방법을 이해합니다 .

defaults: {
    exports: {
        shouldShowMessage: '${$.component}'
    }
}

내보내기에서 구성 요소 이름을 리턴합니다.

그러나 녹아웃 옵저버 블을 내보내려고 할 때 항상 정의되지 않습니다.

defaults: {
    exports: {
        shouldShowMessage: '${$.shouldShowMessage}'
    }
}

...

setupKoBindings: function() {
    this.shouldShowMessage = ko.observable('Testing');
}

해결 방법으로 여기에 설명 된대로 스토리지 모델을 작성하려고 하지만 가져 오기 및 내보내기를 사용하는 것이 좋습니다.

— 벤 크룩
소스

exports 객체의 값은 UiComponent 인스턴스의 이름과 속성으로 ':'으로 구분되어야합니다 (예 :) checkout.cart.total:title.
내보내기 대상 이름에는 UI 구성 요소 "namespace"가 포함되어야합니다.

예제에서 값을 문자열로 설정하면 내보내기 소스 인 UiComponent의 특성으로 해석됩니다. 내보내기는 유효한 내보내기 대상이 아니기 때문에 검사 할 때 정의되지 않습니다.

다음은 작동하는 예입니다.

defaults: {
    exportTarget: "foo.bar",
    exportTargetProperty: "showMessage",

    tracks: {
        shouldShowMessage: true
    },

    exports: {
        shouldShowMessage: '${$.exportTarget}:${$.exportTargetProperty}'
    }
}
...

위의 값은 shouldShowMessage속성 값을 값이 바뀔 때마다 showMessage전체 이름을 가진 UiComponent 속성 에 복사합니다 foo.bar.
이로 인해 대상 속성을 KO 관찰 가능하게 자동으로 만들지는 않습니다. 값을 변경하면 KO가 해당 속성에 액세스하는 DOM 노드를 다시 렌더링하도록 트리거해야하는 경우 명시 적으로 선언해야합니다.

그건 그렇고, 객체에 추가 shouldShowMessage하면 tracks자동으로 ko-es5를 관찰 할 수 있습니다. 리터럴을 사용하는 것도 ko.observable()효과가 있습니다.

위의 예에서 exportTarget및 exportTargetProperty은에 구성되어 있습니다 defaults. 또한 JSON에서 UiComponent 옵션의 일부로 지정할 수도 있습니다. 이는 UiComponent 이름을 포함하여 UiComponent 계층이 정의 된 위치이므로 일반적으로 더 의미가 있습니다.

마지막으로, 필자는 개인적으로 값 객체를 사용하여 다른 UI 구성 요소에 값을 전달하는 솔루션이 내보내기 또는 가져 오기를 사용하는 것보다 낫다고 생각합니다. 내 경험상 DOM 또는 UiComponents에서 공유 상태를 유지하는 것은 가장 간단한 경우를 제외하고는 스파게티 OOP의 레시피입니다.

— 비나이
소스

훌륭한 설명, 감사합니다 @Vinai! 시간이 있으면 시도해보고 작동하면 승인 된 것으로 표시합니다.

— 벤 크룩

내가 사용하는 몇 가지 문제로 실행되지했습니다 tracks더 이상 작동을 수동으로 관찰 가능한에 가입, this.shouldShowMessage.subscribe is not a function사용할 때 this.shouldShowMessage.subscribe(function() { ... }); 설정은 다른 방법으로 관찰 가능한 때 잘 작동합니다. 마치 단계 tracks가 누락되었거나 동일한 방식으로 관찰 가능 항목을 만들지 않는 것처럼 느낍니다.

— 벤 크룩

당신은 맞습니다, 속성은 더 이상 일반적인 ko 관측 가능하지 않으며 ES5 getter / setter 쌍입니다. 관찰 가능한 원래 기능에 액세스하려면 ko를 주입하고 사용할 수 있습니다 ko.getObservable(this, 'shouldShowMessage').subscribe(function(newValue) { ...});(첫 번째 인수는 뷰 모델 ( this), 두 번째는 추적 된 속성의 이름입니다. 자세한 정보는 여기 : github.com/SteveSanderson/knockout-es5

— Vinai

으아 아, 당신은 최고입니다 <3

— Ben Crook

수입품과 수출품을 가지고 놀고 여전히 실패한 후에 나는 이것이 스파게티 코드라는 것에 동의합니다. 나는 포기했으며 수동 가입과 스토리지 모델을 고수 할 것입니다.

— 벤 크룩