JavaScript-templating
-
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?