JavaScript-templating

gobiyau

JavaCcript templating is very wonderful, easy to read, and code look more simple.

e.g.

<script id="list-item" type="text/template">
  <ons-list-item modifier='longdivider chevron tappable'>"
    <div class='left'>
      <img class="list-item__thumbnail" src = '{{phone}}'/>
    </div>  
    <div class='center'>{{name}}</div>
  </ons-list-item> 
</script>

https://jonsuh.com/blog/javascript-templating-without-a-library/

But it only works in single page onsen HTML, and doesn’t work in multi- onsen HTML.

So what I can do is change script to div and make it hidden.

<div class="hidden" id="list-item" type="text/template">
  <ons-list-item modifier='longdivider chevron tappable'>"
    <div class='left'>
      <img class="list-item__thumbnail" src = '{{phone}}'/>
    </div>  
    <div class='center'>{{name}}</div>
  </ons-list-item> 
</div>
<style>
   .hidden { display:none; }
</style>

I still want to use script instead of div hidden, is there any better solution?