如何将 canvas 插入 Handlebars.js 模板

Question

很简单：

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

是canvas标签没有正确转义还是什么？我也尝试了以下方法，但无济于事：

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

如何在我的 handlebars.js 模板中包含带有源的 canvas 并使其呈现？

更新：

我的所有脚本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"/>

我的模板：

<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>

和页面底部之前的脚本：

<!-- 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

删除模板中的内部脚本：

<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>

像这样：

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

这是一个工作示例：

<!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>

输出：

如何将 canvas 插入 Handlebars.js 模板

How do I insert a canvas into Handlebars.js template

html

javascript

canvas

processing.js

handlebars.js