Problems with jQuery templates. Object doesn't support this method error_问答_开发者

Problems with jQuery templates. Object doesn't support this method error

开发者 https://www.devze.com 2023-02-05 08:45 出处：网络

I am learning about template in jquery. And have get over some example code that I testing. But it doesn\'t seem to work.

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.