Question

我正在尝试预编译车把模板。虽然我正确地遵循了这些步骤，但我得到的是TypeError：Handlebars.templates未定义。

这是我的HTML文件

<!DOCTYPE html>
<html>
  <head>
    <title>Handlebars Helpers Example</title>
  </head>
  <body>
    <h1>Handlebars Helpers Example!</h1>
    <div id="list"></div>
    <script type="text/javascript" src="js\libs\jquery.js"></script>
    <script type="text/javascript" src="js\libs\handlebars.runtime-v1.3.0.js"></script>
    <script type="text/javascript" src="js\data.json"></script>
    <script type="text/javascript" src="js\templates.js"></script>
    <script type="text/javascript" src="js\custom.js"></script>
  </body>
</html>

这是我的JSON文件

var data = 
{
    people: 
    [
        { first_name: "Alan", last_name: "Johnson", phone: "1234567890", email: "alan@test.com", member_since: "Mar 25, 2011" },
        { first_name: "Allison", last_name: "House", phone: "0987654321", email: "allison@test.com", member_since: "Jan 13, 2011" },
        { first_name: "Nick", last_name: "Pettit", phone: "9836592272", email: "nick@test.com", member_since: "Apr 9, 2009" },
        { first_name: "Jim", last_name: "Hoskins", phone: "7284927150", email: "jim@test.com", member_since: "May 21, 2010" },
        { first_name: "Ryan", last_name: "Carson", phone: "8263729224", email: "ryan@test.com", member_since: "Nov 1, 2008" }
    ]
}

这是我的名为temp.hbs的Handlebar模板文件，我成功编译成了template.js

{{#each people}}
    <div class="person">
      <h2>{{first_name}} {{last_name}}</h2>
      <div class="phone">{{phone}}</div>
      <div class="email"><a href="mailto:{{email}}">{{email}}</a></div>
      <div class="since">User since {{member_since}}</div>
    </div>
{{/each }}

**这是我的custom.js **

$(document).ready(function()
{
    /*var template = Handlebars.compile($("#people-template").html());
    $('#list').html(template(data));*/
    var template = Handlebars.templates['template'];
    $('#list').html(template(data));
});

Answer 1

请遵循我的代码，内联HTML渲染车把模板

    	var data = {
			    people: 
			    [
			        { first_name: "Alan", last_name: "Johnson", phone: "1234567890", email: "alan@test.com", member_since: "Mar 25, 2011" },
			        { first_name: "Allison", last_name: "House", phone: "0987654321", email: "allison@test.com", member_since: "Jan 13, 2011" },
			        { first_name: "Nick", last_name: "Pettit", phone: "9836592272", email: "nick@test.com", member_since: "Apr 9, 2009" },
			        { first_name: "Jim", last_name: "Hoskins", phone: "7284927150", email: "jim@test.com", member_since: "May 21, 2010" },
			        { first_name: "Ryan", last_name: "Carson", phone: "8263729224", email: "ryan@test.com", member_since: "Nov 1, 2008" }
			    ]
			}
			
			$(document).ready(function()
			{
			    var template = $('#template').html();
    			var template_compiled = Handlebars.compile(template);
    			var rendered = template_compiled(data);
    			$('#list').html(rendered);

			});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>

<h1>Handlebars Helpers Example!</h1>
<div id="list"></div>

<script id="template" type="text/x-handlebars-template">
    {{#each people}}
	    <div class="person">
	      <h2>{{first_name}} {{last_name}}</h2>
	      <div class="phone">{{phone}}</div>
	      <div class="email"><a href="mailto:{{email}}">{{email}}</a></div>
	      <div class="since">User since {{member_since}}</div>
	    </div>
	{{/each }}
</script>

面对PRECOMPILATION把手的问题

1 个答案: