Problems with jQuery templates. Object doesn't support this method error
I am learning about template in jquery. And have get over some example code that I testing. But it doesn't seem to work.
<html>
<head>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js " type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js" type="text/javascript" />
</head>
<body>
<h2>ViewPage1</h2>
<script id="movieTemplate" t开发者_运维问答ype="x-jquery-tmpl">
<li><b>${Name}</b> (${ReleaseYear})</li>
</script>
<div id="movieList"></div>
<script type="text/javascript">
var movies = [
{ Name: "The Red Violin", ReleaseYear: "1998" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
{ Name: "The Inheritance", ReleaseYear: "1976" }
];
// Render the template with the movies data and insert
// the rendered HTML under the "movieList" element
$("#movieTemplate").tmpl(movies).appendTo("#movieList");
</script>
</body>
When debugging I can see that the problem is with the .appendTo() method. And I can also see in intellisens that that method is not in there.
What have I done wrong?
It seems to be a problem with the script definitions in the header:
<head>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js " type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js" type="text/javascript" />
</head>
The script tag needs to have a closing </script> tag. Essentially your tmpl script wasn't loading. I did notice this is a bug in the tmpl example, so not really your fault. If you change the second one to match the first, it works fine:
<head>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js " type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js" type="text/javascript"></script>
</head>
Example: http://jsfiddle.net/UZ62w/
I'm pretty sure it has to do with the tmpl not returning a jQuery object. Try modifying your js to resemble something like this
var movies = [
{ Name: "The Red Violin", ReleaseYear: "1998" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
{ Name: "The Inheritance", ReleaseYear: "1976" }
],
template = $("#movieTemplate").tmpl(movies);
$("#movieList").append(template);
edit: Here's a jsfiddle showing it works.
加载中,请稍侯......
精彩评论