使用js中的字符串数组填充handlebars.js模板

时间:2016-07-25 21:15:08

标签: javascript node.js handlebars.js

我不知道这是否可能,但我花了很多时间试图弄清楚如何做到这一点。我的.js文件中有一个字符串值数组,其中包含html标记。与此类似的数组:

var values = [
    <h1>Introduction</h1>,
    <h3>Words</h3>,
    <p>More words</p>
]

我试图将它们插入车把模板,但我似乎找不到办法。我尝试使用node {js的{{#each _}}方法的变体无济于事。请让我知道如何做到这一点,或者甚至可能。

这是我目前的代码。我试图在html中硬编码时显示数据数组。我没有错误,但代码不显示。               eSOMS教程          

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="c://node.js/server.js"></script>
</head>
<body>

  <script id="content-template" type="text/x-handlebars-template">
    {{#each data}}
          {{this}}
    {{/each}}
  </script>

  <script type="text/javascript">
    $(document).ready(function() {

      var data = [
            '<h1>Introduction</h1>',
            '<h3>The Enterprise Shift Operations Management System</h3>',
            '<p>The Enterprise Shift Operations...</p>',
            '<p>The purpose of this tutorial is to...</p>'
        ];

      if(!Handlebars.templates){ Handlebars.templates = {}; }

      Handlebars.templates.full = Handlebars.compile($("#content-template").html());  
      $('#output').html(Handlebars.templates.full({data: data}));
    });
  </script>

  <div id='output'></div>
</body>
</html>

还有更多的代码,但我认为我已经掌握了相关的一切。

0 个答案:

没有答案