コレクションリストを含むTVML画面があります。画面には、ユーザーが特定のビデオを視聴したかどうかを示すチェックマークが隅に付いたボタンがいくつか表示されます。
<stackTemplate>
<collectionList>
<grid>
<section>
{{#lessons}}
<lockup
template="lesson.tvml"
presentation="push"
id="{{lsnm}}"
data='......'>
<img src="https://my.s.ite.com/{{lesson_num}}.png" width="304" height="304"/>
<title>Day {{lesson_num}}</title>
<overlay>
{{#watched}}
<img src="https://yoga365.online/tvapp/check_{{suffix}}.png" class="seenmark" alt="Lesson {{lesson_num}}" width="30" height="30"/>
{{/watched}}
</overlay>
</lockup>
{{/lessons}}
</section>
</grid>
</collectionList>
</stackTemplate>
データは、ユーザーが視聴したものを含め、利用可能なすべてのビデオを返す API 呼び出しから取得されます。
ユーザーがボタンを選択すると、lesson.tvml が表示されます。これは、再生ボタンを持つ productTemplate です。
ビデオが再生されると、プログレス ハンドラーは、ビデオが少なくとも終了の 15 秒前まで視聴されたかどうかを監視し、データベースで視聴済みとしてマークします。動画が終了すると、画面はlesson.tvmlに戻ります。ユーザーが MENU を押すと、アプリはコレクション一覧画面に戻ります。この時点で、API への呼び出しが再度行われ、ユーザーが視聴したビデオの視聴済みマークがそれに応じてレンダリングされるように、画面を更新したいと思います。
メニュー バーで別の項目を選択すると、画面を更新できました。
presentMenuBarItem(doc, menuItem, template) {
var feature = menuItem.parentNode.getFeature("MenuBarDocument");
if (feature) {
var currentDoc = feature.getDocument(menuItem);
if (template.includes("days.tvml")) {
currentDoc = undefined
}
if (!currentDoc) {
feature.setDocument(doc, menuItem);
}
}
}
しかし、更新したいコレクション リストは、メニュー バーからアクセスできない第 2 レベルの画面であるため、メニュー バーなしでそれを行う方法がわかりません。