機械翻訳について

フラグメント・コンテンツのレンダリングの遅延

デフォルトでは、フラグメントはページがレンダリングされるとすぐにロードされますが、この動作を変更して、ページが最初により高速にレンダリングされるようにできます。 たとえば、インシデント・ページには、リスト、マップおよびスケジュールという3つのタブがあり、これらはすべて個別の断片で定義されています。 インシデント・ページに表示されるリスト・フラグメントの内容のみが必要な場合、oj-defer要素にMapフラグメントおよびScheduleフラグメントをラップして、これらのフラグメントのレンダリングを実行時に遅延できます。

レンダリングする非表示フラグメントをトリガーするものは構成可能です。 ボタン・クリック、タブの選択、ダイアログを開く、または条件を使用してコンテンツを表示するoj-bind-ifがあります。 このような場合、UIイベントまたはアプリケーション状態によって、フラグメントがいつロードされるかが決まります。 インシデントの例では、ユーザーがいずれかのタブをクリックしてコンテンツを表示したときにのみ、非表示のマップまたはスケジュール・フラグメントがページに表示されます:

図fragment-incidents.pngの説明

フラグメントが"visible"になるまでレンダリングから遅延することもできます。 たとえば、ページのスクロールを促すコンテンツが多数あるとします。 ビューポートに隠されているセクションを含め、ページ全体をロードするのではなく、一部のセクションをユーザーが表示に持ち込んだ場合にのみロードできます。 この場合、ページを別のフラグメントに分割してから、フラグメントを表示したときにのみレンダリングするトリガーを追加できます。

遅延レンダリング用にフラグメントを設定するには:

1. フラグメントを含むwebアプリケーション・ページを開きます。
2. キャンバスまたは構造ビューで、コンテンツを後でレンダリングするフラグメント・コンテナを選択します。
3. コンテナを右クリックし、「囲む」、「遅延」の順に選択します。
   
   

   
   「図fragement-defer.pngの説明」

   
   

   Defer要素は、キャンバスと構造ビューの両方でフラグメント・コンテナに追加されます。 コード・ビューをクリックすると、oj-vb-fragmentの周囲にoj-deferが表示されます。 リスト、マップおよびスケジュール・タブが表示されたインシデント・タブ・バーのコード・スニペットで、最初のタブを除くすべてのタブが最初は非表示になります:

   <oj-tab-bar selection="{{ $variables.incidents }}">
   <ul>
     <li id="list">List</li>
     <li id="map">Map</li>
     <li id="Schedule">Schedule/li>
   </ul>
   </oj-tab-bar>
   <oj-switcher value="[[ $variables.incidents ]]">
     <div slot="list">
         <oj-vb-fragment id="incidentslist" name="incidentsList"></oj-vb-fragment>
     </div>
     <div slot="map">
       <oj-defer>
         <oj-vb-fragment id="incidentsmap" name="incidentsMap"></oj-vb-fragment>
       </oj-defer>
     </div>
     <div slot="schedule">
       <oj-defer>
         <oj-vb-fragment id="incidentsschedule" name="incidentsSchedule"></oj-vb-fragment>
       </oj-defer>
     </div>
   </oj-switcher>