Question

我是下划线的初学者，此代码段显示空白网页而不是模板。如果有人可以帮助我，我会非常有帮助:)

summa.html

<html>
<head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <meta charset="utf-8">
</head>
<body>

    <div class="tangent"></div>
      <script type="text/template" id="temp">
    <h1><%= head %></h1>
    </script>

    <script type ="text/javascript" id="tem">
        var head = "hii";
        //var head2 = "hello";

        var templ = $('#temp').html() ;
        $('#tagent').html(_.template(templ,{head:head}));        
    </script>
</body>

在我的mozilla上运行它，控制台会显示这些消息 GET http://localhost/summa.html [HTTP/1.1 304 Not Modified 5ms] GET http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js [HTTP/1.1 304 Not Modified 232ms] GET http://code.jquery.com/jquery-latest.min.js [HTTP/1.1 304 Not Modified 556ms] 我用Google搜索，我知道这不是错误信息或问题。那么我犯错的地方是什么？提前谢谢你

Answer 1

有些事情你做错了。

首先，您必须将模板html传递给_.template并将其分配给变量。此变量存储对函数的引用，然后调用它作为参数传递{head:head}。最后，您尝试按ID选择tangent div（使用#）。由于您只定义了此元素的类，因此应使用.选择它。

我认为这是你正在寻找的东西：

<html>
<head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <meta charset="utf-8">
</head>
<body>

    <div class="tangent"></div>
      <script type="text/template" id="temp">
    <h1><%= head %></h1>
    </script>

    <script type="text/javascript" id="tem">
        var head = "hii";
        //var head2 = "hello";

        var templ = $('#temp').html();
        var template = _.template(templ);
        $('.tangent').html(template({head:head}));
    </script>
</body>

下划线代码在网页上不显示任何内容

1 个答案: