how can i add inline javascripts to navigation template in Google App Scripts-CodePudding

I am trying to develop a navigational menu being referenced to different pages in my app. am using Materialize css as a ui and placed the nav codes in a separate file

        <div id="navigation">
    <nav>
      <div >
        <div >
          <a href="#" >
          <a href="#"  data-target="sideMobile"> <i >menu</i> </a>      
          <ul >
            <li>          
              <a href="<?= getbaseUrl(); ?> "   type="button"  >Incoming Stock</a>
            </li>
            <li><a href="page.html">Components</a></li>
            <li><a href="page.html">Javascript</a></li>
            <li><a href="page.html">Mobile</a></li>
          </ul>

        </div>
      </div>
    </nav>

    <ul  id="sideMobile">
      <div >
        <li><a href="page.html">Sass</a></li>
        <li><a href="page.html">Components</a></li>
        <li><a href="page.html">Javascript</a></li>
        <li><a href="page.html">Mobile</a></li>
      </div>
    </ul> 
    </div>

which is being reference in the different pages as

<?!= include("navBar"); ?>

in the <head> part of the code.

function include() is in the serverside code as

return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

in the doGet part of the app, page is being rendered by

return HtmlService.createTemplateFromFile("home").evaluate();

how can i get to write inline codes in the navBar page? when rendered, all javascript are being displayed as encoded html.

thank you in advance

CodePudding user response：

Instead of creating an HtmlOutput, you should create an HtmlTemplate object and evaluate it.

Reference: Class HtmlTemplate

A template object for dynamically constructing HTML.

function include(filename) {
  return HtmlService.createTemplateFromFile(filename).evaluate().getContent();
}