How do I insert a canvas into Handlebars.js template

Question

Quite simply:

<script id="write-tpl" type="text/x-handlebars-template">
    <canvas data-processing-sources="processing.pde"></canvas>
</script>

Is the canvas tag not properly escaped or something? I've tried the following as well, to no avail:

<canvas data-processing-sources="processing.pde"><{{!}}/canvas>

How can I include the canvas with a source in my handlebars.js template and get it to render?

Update:

All of the scripts in my header:

 <!-- Materialize Icons  -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <!-- Typicons -->
  <link rel='stylesheet' href='typicons.font-master/src/font/typicons.min.css' />

  <!-- JQuery -->

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars.min-latest.js"></script>

  <!-- Materialize JS -->
  <script src="js/materialize.min.js"></script>

  <!-- Drop Down -->
  <script>
    $( document ).ready(function() {
      $('.dropdown-button').dropdown({
        inDuration: 300,
        outDuration: 225,
              constrain_width: false, // Does not change width of dropdown to that of the activator
              hover: false, // Activate on click
              alignment: 'left', // Aligns dropdown to left or right edge (works with constrain_width)
              gutter: 0, // Spacing from edge
              belowOrigin: false // Displays dropdown below the button
            });
    });
  </script>

  <script>
    var data = {
      width: 200,
      height: 100,
      background: "#000"
    };

    var template = Handlebars.compile($("#write-tpl").html());

    document.body.innerHTML = template(data);
  </script>

  <!-- Style -->
  <link href="css/materialize.css" rel="stylesheet"/>
  <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>

And my template:

<script id="write-tpl" type="text/x-handlebars-template">

      <script id="write-tpl" type="text/x-handlebars-template">
        <canvas data-processing-sources="js/processing.pde" width="{{width}}" height="{{height}}" style="background:{{background}};"></canvas>
        <{{!}}/script>

    </script>

And scripts at the bottom of the page prior to :

<!-- Javascript -->
    <script src="https://www.parsecdn.com/js/parse-1.2.19.min.js"></script>
    <script src="js/blog.js"></script>

    <!-- Popup -->
    <script src="view.min.js?auto"></script> 

    <!-- Processing -->
    <script src="js/processing.js"></script>

Answer 1

Remove your inner script in your template:

<script id="write-tpl" type="text/x-handlebars-template">
      <script id="write-tpl" type="text/x-handlebars-template">
         <canvas data-processing-sources="processing.pde" width="{{width}}" height="{{height}}" style="background:{{background}};"></canvas>
      <{{!}}/script>
</script>

Like this:

<script id="write-tpl" type="text/x-handlebars-template">
    <canvas data-processing-sources="processing.pde" width="{{width}}" height="{{height}}" style="background:{{background}};"></canvas>
</script>

Here's a working example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>untitled</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars.min-latest.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.16/processing.min.js"></script>
</head>
<body>

    <script id="write-tpl" type="text/x-handlebars-template">
        <canvas data-processing-sources="processing.pde" width="{{width}}" height="{{height}}" style="background:{{background}};"></canvas>
    </script>


    <div id="content"></div>

    <script>
        $(document).ready(function(){
            var data = {
              width: 200,
              height: 100,
              background: "#000"
            };

            var template = Handlebars.compile($("#write-tpl").html());

            $("#content").html(template(data));

        });
    </script>


</body>

Output:

How do I insert a canvas into Handlebars.js template

Question

1 answers

solution1
1 ACCPTED 2016-02-04 03:29:24

How do I insert a canvas into Handlebars.js template

Question

1 answers

solution1 1 ACCPTED 2016-02-04 03:29:24

solution1
1 ACCPTED 2016-02-04 03:29:24