3. JavaScript-templating

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

JavaScript-templating

  • G

    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?

    0