下划线模板不起作用

Question

在我的HTML中我有：

<input type="button" id="button" value="Click Me!!"></input>

<script type="text/template" id="users-template">
<% _.each(users, function(user){ %>
    <b><%= user.name    %></b> <br />
    <%= user.city   %> <br />
    <%= user.education  %> <br />
<%});%>
</script>

getJSON 代码是：

$("#button").click(function(){
    var usertemplate = _.template($("#users-template").html());

    $.getJSON("underscoredata.php", function(data){

        var resultinghtml = usertemplate({users: data.users});

    });

});

</script>

来自underscoredata.php我json_encode的数据。最终数据为：

{"users":[{"name":"Daniel","city":"Pune","education":"engineer"},{"name":"Joseph","city":"Bangalore","education":"Doctor"},{"name":"Radhika","city":"Delhi","education":"Actor"}]}

但是我在页面中没有看到任何内容。我如何在页面上显示用户信息> 我已经包含了 jquery 和下划线路径。

谢谢。

Answer 1

您需要将 html 结果添加到 DOM，创建一个目标元素：

<div id="target"></div>

并附加结果html

...
var resultinghtml = usertemplate({users: data.users});
$('#target').html(resultinghtml);
...

下划线模板不起作用

Underscore template not working

javascript

jquery

underscore.js

underscore.js-templating