app/scripts/views/ChannelGuide.js
/**
   * Renders the channel guide.
   *
   * @return {HTMLElement} The rendered element
   */
Renders the channel guide.
@return {HTMLElement} The rendered element
Renders the channel guide . @return { HTMLElement } The rendered element
render() {
    console.log(`Render channel guide, ${this.programs.length} elements`);
    const watchablePrograms = this.programs.filter((program) => !!program.playbackUrl);
    return bind(this.element)`
      ${ watchablePrograms.map((p) => wire()`
        <div class="mdc-card">
          <section class="mdc-card__primary">
            <h2 class="mdc-card__subtitle">
              ${ p.startTime.getHours() }:${ String(p.startTime.getMinutes()).padStart(2, '0') }
            </h2>
            <h1 class="mdc-card__title mdc-card__title--large">${ p.title }</h1>
          </section>
          <section class="mdc-card__supporting-text">${ p.description }</section>
          <section class="mdc-card__actions" style="justify-content: flex-end">
            ${this.createAction(p)}
          </section>
        </div>
      `)}
  `;
  }
render ( ) { console . log ( ` ${ this . programs . length } ` ) ; const watchablePrograms = this . programs . filter ( ( program ) => ! ! program . playbackUrl ) ; return bind ( this . element ) ` ${ watchablePrograms . map ( ( p ) => wire ( ) ` ${ p . startTime . getHours ( ) } ${ String ( p . startTime . getMinutes ( ) ) . padStart ( 2 , '0' ) } ${ p . title } ${ p . description } ${ this . createAction ( p ) } ` ) } ` ; }
Renders the channel guide.
Renders the channel guide .
// Attach the scroller - this is done after templating to permit the right behaviour // const tabBarScroller = //  new MDCTabBarScroller(document.querySelector('.mdc-tab-bar-scroller'));