Monaca Onsen UI Discord Chat Github Repo

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?