我如何在单页面应用程序中使用胡子模板?

时间:2014-07-09 11:44:36

标签: jquery html5 mustache

ve been starting to learn mustache for a SPA project. it is a provate simple project. i编写了usageMustage.html(测试我的模板)和sampleTemp.html以及data.json。我一直在谷歌上搜索很多文章。但我看不到任何测试页面......

我的模板:


<script id="personTpl" type="text/template">
<h1>{{firstName}} {{lastName}}</h1>
<p>Blog URL: <a href="{{blogURL}}">{{blogURL}}</a></p>
</script>

测试页:


<html>
    <head>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
        <script src="https://raw.github.com/janl/mustache.js/master/mustache.js" type="text/javascript"></script>
        <script src="../src/jquery.mustache.js" type="text/javascript"></script>
        <script type="text/javascript">


$(function() {

                $.getJSON('json/data.json', function(data) {
    var template = $('#personTpl').html();
    var html = Mustache.to_html(template, data);
    $('#sampleArea').html(html);
});

});
    </script>
    </head>
    <body>
        <div id="sampleArea"></div>
    </body>
</html>


JSON:


{
    firstName: "John",
    lastName: "Smith",
    blogURL: "http://johnsmith.com",
    manager : {
        firstName: "Lisa",
        lastName: "Jones"
    }
    }

0 个答案:

没有答案