JSS Vue.jsサンプルアプリでプレースホルダーを扱う方法

基本的なプレースホルダー技術

プレースホルダーを追加する最も基本的かつ一般的な方法は、Placeholderコンポーネントを使うことです:

nameは公開するプレースホルダーのキーであり、renderingは現在提供されているSitecoreルート/レイアウトデータ、または他のコンポーネント内でプレースホルダーを公開する場合は親コンポーネントデータです。

Placeholderコンポーネントは子コンポーネントの周りにラッパーをレンダリングしません。これはVueのフラグメント技術によるものです。

SitecoreJssPlaceholderPlugin technique

この技術により、Vueコンポーネントの配列をプレースホルダー で、計算されたプロパティとしてコンポーネントインスタンスに付与してプレースホルダーを公開できます。

この技術により、従来のSitecore開発ではほぼ不可能だった非常に強力な操作技術が可能になります。

この技術を使うには、sitecore-jss-vueパッケージに付属しているSitecoreJssPlaceholderPluginVueプラグインをインストールする必要があります。以下のように。

import { createApp, createSSRApp } from 'vue'; import { SitecoreJssPlaceholderPlugin } from '@sitecore-jss/sitecore-jss-vue'; import componentFactory from './path/to/your/componentFactory.js';

const app = isSSR ? createSSRApp(vueOptions) : createApp(vueOptions);

// The plugin uses a "global" componentFactory, but you can override // the `componentFactory` at the component level if needed. app.use(SitecoreJssPlaceholderPlugin, { componentFactory });

コンポーネントでプラグインを使うには、コンポーネントにwithPlaceholderプロパティを追加してください:

前述の例では、SitecoreJssPlaceholderPluginプラグインはbeforeCreateフックに取り付けるmixinを使ってコンポーネント定義上のwithPlaceholderプロパティを探します。プラグインはwithPlaceholderプロパティが提供する値を使い、renderingプロパティデータ内のtabsなど指定されたプレースホルダーデータを見つけます。プラグインはそのコンポーネントに対して計算されたプロパティを作成し、プレースホルダーの名前をデフォルトでプロパティ名として使い、そのプレースホルダーのすべてのVueコンポーネントの配列を計算されたプロパティに割り当てます。これにより、Vue.jsの動的コンポーネント機能を使ってテンプレート内のプレースホルダーコンポーネントをレンダリングできます。

テンプレート内のコンポーネント配列を反復すると、Vueは出力した場所でコンポーネントをレンダリングします。またはPlaceholderコンポーネントを使ってこれを実現できます。この方法でプレースホルダーの内容を発行すると、そのプレースホルダーの内容にはラップコンポーネントがなく、インラインでレンダリングされます。これは特定のコンポーネント階層に基づくVueライブラリ(例えばvue-carousel)を使う場合に非常に役立ちます。例えば、以下のコードサンプルを考えてみてください:

スロットAPI

SitecoreJssPlaceholderPluginプラグインが提供する動的計算プロパティではなくスロットパターンを好みたい場合は、JSSプレースホルダーにはデフォルトのスロットスコープがあります。コンポーネントのdefaultスコープ付きスロットを使えば、動的に計算されたプロパティと同様にプレースホルダーの内容のレンダリングを引き継ぐことができます。

以下の例は、デフォルトのスコープスロットを使ってコンポーネント配列をレンダリングする方法を示しています。

直接的なプレースホルダー内省

プレースホルダーのレンダリングを完全にコントロールしたいなら、そのプレースホルダーの構成要素ではなくその データにアクセスし、$props.renderingを使って子コンポーネントのデータやフィールドを巡査できます。なぜなら、プレースホルダーの階層はJavaScriptオブジェクトだからです。このデータは好きなようにレンダリングできます。

良いユースケースとしては、タブのパーツを複数の場所(タブタイトルやタブの内容)にレンダリングしたいコンポーネントなどがあります。例えば:

前述の技術を使えば、コンポーネント内に複数のプレースホルダーをレンダリングできます。例えば:

• 基本的なテクニックを使う:

• SitecoreJssPlaceholderPluginの使い方:

プレースホルダーの強化

プレースホルダーコンポーネントは、体験を向上させる多くのカスタマイズをサポートします。