Question

在尝试使用Handlebars时我做错了什么？

HTML

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>



</script>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="_conv_logo_login_container">

  </div>
</body>
</html>

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

  <ul class="dropdown-menu" role="menu">

    {{#tools_links}}

     <li>

       <a id="{{id}}" href="{{href}}">{{human_readable}}</a>

     </li>

    {{/tools_links}}


  </ul>

JS

var data = {
    "tools_links": [
        {
            "id": "assignments",
            "human_readable_report": "Assignments",
            "href": "site.com/assignments",
            "attrs": {
                "data-order": 1
            },
            "submenu": ""
        },
        {
            "id": "reporting",
            "human_readable": "Reporting",
            "href": "site.com/reporting",
            "attrs": {
                "data-order": 2
            },
            "submenu": ""
        }
    ]
};


var source   = $("#tools_links_template").html();
var template = Handlebars.compile(source);

$("._conv_logo_login_container").html(template(data));

我一直收到错误：

Uncaught Error: You must pass a string or Handlebars AST to Handlebars.compile. You passed undefined

我尝试了{{#with tools_links}}，只是{{items}}。

JSBIN

Answer 1

两个问题：

您的模板不在<html></html>标记内。将模板<script>标记放在<head>内或<body>的底部。
您的模板没有结尾</script>标记。

jQuery搜索<head>和<body>中的元素，而不是HTML文件的所有文本。

把手没有正确编译声称我不传递字符串

1 个答案: