UIコンポーネント間でKnockout JSオブザーバブルを共有する方法

次のようなUIコンポーネントプロパティの使用方法imports: {}とexports: {}共有方法を理解しています。

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

エクスポートでコンポーネント名を返します。

しかし、Knockoutオブザーバブルをエクスポートしようとすると、常に未定義になります。

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

...

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

回避策として、ここで説明するようにストレージモデルを作成しますが、インポートとエクスポートを使用したいと思います。

exportsオブジェクトの値は、「：」で区切られたUiComponentインスタンスの名前とプロパティに解決される必要がありますcheckout.cart.total:title。
エクスポートターゲット名には、UIコンポーネント「名前空間」を含める必要があります。

この例では、値を文字列に設定します。これは、エクスポートソースである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のレシピです。