Question

我正在尝试在html中加载我的模板。但是在我的div元素中加载模板内容时遇到了一些麻烦。它给了我未捕获的TypeError：对象没有方法'appendTo'

temp.html是div所在的文件。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />

        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
        Remove this if you use the .htaccess -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

        <title>HTML</title>
        <meta name="description" content="" />
        <meta name="author" content="" />

        <meta name="viewport" content="width=device-width; initial-scale=1.0" />

        <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
        <link rel="shortcut icon" href="/favicon.ico" />
        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />

        <script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script>
        <script src="scripts/jquery.tmpl.min.js"></script>

        <script>
            $.get('template.html', function(templates) {
                var template1 = $(templates).filter("tmplFeatures").html();
                $("#tmplFeatures").tmpl(template1).appendTo("carouseldata");
            });
        </script>

    </head>

    <body>

        <div id="carouseldata" style="background-color:#FF0000; width: 100%;height: 100%;z-index: 50">

        </div>

    </body>
</html>

包含模板的template.html文件

<script id ="tmplFeatures" type="text/x-jquery-tmpl">
   <div id="mydata" style="overflow-x:hidden;width: 100%;height: 100%">
                        <ul id="mycarousel" class="jcarousel-skin-tango">
                            <li><img src="images/image1.jpg" width="400" height="300" alt="" />
                                <div style="color:#FFFFFF;margin-top: -85px;z-index: 60;background-color: #000000;opacity: 0.5;filter: alpha(opacity=50);width: 400;height:80px">
                                    <img src="images/images.jpg" width="200" height="70" align="middle"/>
                                    <img src="images/divider.png" width="2" height="40" align="middle"/>
                                    <img src="images/cbs.png" width="100" height="70" align="middle"/>
                                    <img src="images/lock.png" align="middle" />
                                </div>
                            </li>
                            <li><img src="images/image2.jpg" width="400" height="300" alt="" />
                                <div style="color:#FFFFFF;margin-top: -85px;z-index: 60;background-color: #000000;opacity: 0.5;filter: alpha(opacity=50);width: 400;height:80px">
                                    <img src="images/images.jpg" width="200" height="70" align="middle"/>
                                    <img src="images/divider.png" width="2" height="40" align="middle"/>
                                    <img src="images/thumb-comcast.gif" width="100" height="70" align="middle"/>
                                </div>
                            </li>
                            <li><img id="image3" src="images/image3.jpg" width="400" height="300" alt="" />
                                <div style="color:#FFFFFF;margin-top: -85px;z-index: 60;background-color: #000000;opacity: 0.5;filter: alpha(opacity=50);width: 400;height:80px">
                                    <img src="images/images.jpg" width="200" height="70" align="middle"/>
                                    <img src="images/divider.png" width="2" height="40" align="middle"/>
                                    <img src="images/cbs.png" width="100" height="70" align="middle"/>
                                </div>
                            </li>
                            <li><img src="images/image4.jpg" width="400" height="300" alt="" />
                                <div style="color:#FFFFFF;margin-top: -85px;z-index: 60;background-color: #000000;opacity: 0.5;filter: alpha(opacity=50);width: 400;height:80px">
                                    <img src="images/images.jpg" width="200" height="70" align="middle"/>
                                    <img src="images/divider.png" width="2" height="40" align="middle"/>
                                    <img src="images/cbs.png" width="100" height="70" align="middle"/>
                                </div>
                            </li>

                            <li><img src="images/image5.jpg" width="400" height="300" alt="" />
                                <div style="color:#FFFFFF;margin-top: -85px;z-index: 60;background-color: #000000;opacity: 0.5;filter: alpha(opacity=50);width: 400;height:80px">
                                    <img src="images/images.jpg" width="200" height="70" align="middle"/>
                                    <img src="images/divider.png" width="2" height="40" align="middle"/>
                                    <img src="images/cbs.png" width="100" height="70" align="middle"/>
                                </div>
                            </li>

                            <li><img src="images/image6.jpg" width="400" height="300" alt="" />
                                <div style="color:#FFFFFF;margin-top: -85px;z-index: 60;background-color: #000000;opacity: 0.5;filter: alpha(opacity=50);width: 400;height:80px">
                                    <img src="images/images.jpg" width="200" height="70" align="middle"/>
                                    <img src="images/divider.png" width="2" height="40" align="middle"/>
                                    <img src="images/cbs.png" width="100" height="70" align="middle"/>
                                </div>
                            </li>

                            <li><img src="images/image7.jpg" width="400" height="300" alt="" />
                                <div style="color:#FFFFFF;margin-top: -85px;z-index: 60;background-color: #000000;opacity: 0.5;filter: alpha(opacity=50);width: 400;height:80px">
                                    <img src="images/images.jpg" width="200" height="70" align="middle"/>
                                    <img src="images/divider.png" width="2" height="40" align="middle"/>
                                    <img src="images/cbs.png" width="100" height="70" align="middle"/>
                                </div>
                            </li>

                            <li><img src="images/image8.jpg" width="400" height="300" alt="" />
                                <div style="color:#FFFFFF;margin-top: -85px;z-index: 60;background-color: #000000;opacity: 0.5;filter: alpha(opacity=50);width: 400;height:80px">
                                    <img src="images/images.jpg" width="200" height="70" align="middle"/>
                                    <img src="images/divider.png" width="2" height="40" align="middle"/>
                                    <img src="images/cbs.png" width="100" height="70" align="middle"/>
                                </div>
                            </li>

                            <li><img src="images/image9.jpg" width="400" height="300" alt="" />
                                <div style="color:#FFFFFF;margin-top: -85px;z-index: 60;background-color: #000000;opacity: 0.5;filter: alpha(opacity=50);width: 400;height:80px">
                                    <img src="images/images.jpg" width="200" height="70" align="middle"/>
                                    <img src="images/divider.png" width="2" height="40" align="middle"/>
                                    <img src="images/cbs.png" width="100" height="70" align="middle"/>
                                </div>
                            </li>

                            <li><img src="images/image10.jpg" width="400" height="300" alt="" />
                                <div style="color:#FFFFFF;margin-top: -85px;z-index: 60;background-color: #000000;opacity: 0.5;filter: alpha(opacity=50);width: 400;height:80px">
                                    <img src="images/images.jpg" width="200" height="70" align="middle"/>
                                    <img src="images/divider.png" width="2" height="40" align="middle"/>
                                    <img src="images/cbs.png" width="100" height="70" align="middle"/>
                                </div>
                            </li>
                        </ul>
                    </div>
</script>

Answer 1

我想你在这里可能有几个问题......

首先，我认为您的模板调用在语法上是正确的：

$("#tmplFeatures").tmpl(template1).appendTo("carouseldata");

应该（根据文档）看起来像这样：

$.tmpl( "tmplFeatures", template1).appendTo("carouseldata");

但我不确定您是否可以将HTML（template1）作为.tmpl()方法的'data'参数传递：

https://github.com/jquery/jquery-tmpl

<强>更新

仔细查看上面的代码，您似乎没有将任何数据传递给.tmpl()来电。目前尚不清楚以下行返回的内容，但这应该是您的模板将用于显示的可迭代数据。

var template1 = $(templates).filter("tmplFeatures").html();

这看起来像（可能）另一个模板的表示。

无法在HTML中加载模板

1 个答案: