Add Javascript in <script type="text/html>…</script>

Question

I am a new programmer and I have a little question. This is a part of my code:

<script type="text/html" id="experienceTmpl">

  <li class="clearfix">

    <div class="page-header no-border holder">
      <a class="btn btn-icon-toggle btn-accent btn-delete stick-top-right"><span class="md md-delete"></span></a>
      <h4 class="text-accent">Food Items
        <%=index%>
      </h4>
    </div>

    <div class="row">

      <div class="col-md-4">
        <div class="form-group">
          <input type="text" class="form-control" id="experience-company-<%=index%>" placeholder="Food Item" name="experience-company-<%=index%>">
          <label for="experience-company-<%=index%>"></label>
        </div>
      </div>

      <div class="col-md-4">
        <div class="form-group">
          <input type="text" class="form-control" id="experience-functiontitle-<%=index%>" placeholder="Price" name="experience-functiontitle-<%=index%>" data-rule-number="true">
          <label for="experience-functiontitle-<%=index%>"></label>
          <p class="help-block">Digits only</p>
        </div>
      </div>

      <div class="col-md-4">
        <div class="form-group">
          <select id="select1-<%=index%>" name="select1-<%=index%>" class="form-control" placeholder="Select" required>
              <option value="Full Plate">Full Plate</option>
              <option value="Half Plate">Half Plate</option>
              <option value="Quarter Plate">Quarter Plate</option>
          </select>
          <label for="select1-<%=index%>"></label>
        </div>
      </div>

    </div>

    <div class="form-group">
      <input type="text" multiple name="cuisine" class="tagsInput" value="Afghani,Mughlai" data-url="cuisine.json" data-user-option-allowed="true" data-load-once="true" required />
    </div>

  </li>

</script>

My question is how can I add this script in this html template so the class in input tag call this script:

<script type="text/javascript">
    $('.tagsInput').fastselect();
</script>

Is this Possible to call this script in the html template please provide the solution I'm totally blank.

Answer 1

I think best way to do this is, when rendering particular script/html template dynamically add javascript to DOM.

Detail: In application level you know which template is going to rend in the page. make separate JS files for each template id's and inject active template related javascript file to DOM.

Note: This is like you are going to create template engine. Best way to use existing template engine such as Handlebars,JADE,Underscore. it will save your development time and reduced bugs.