Question

我正在学习jquery中的模板。并且已经克服了我测试的一些示例代码。但它似乎没有用。

<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" type="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>

调试时我可以看到问题出在.appendTo（）方法上。我还可以在intellisens中看到该方法不存在。

我做错了什么？

Answer 1

标题中的脚本定义似乎存在问题：

<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>

脚本代码需要有一个结束</script>标记。基本上你的tmpl脚本没有加载。我注意到这是tmpl示例中的一个错误，所以不是你的错。如果您更改第二个以匹配第一个，它可以正常工作：

<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>

实施例： http://jsfiddle.net/UZ62w/

Answer 2

我很确定它与tmpl没有返回jQuery对象有关。尝试修改你的js就像这样的东西

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);

编辑：这是一个jsfiddle，显示它有效。

jQuery模板的问题。对象不支持此方法错误

2 个答案: