胡子标签不起作用?

时间:2015-02-26 06:30:31

标签: jquery templates mustache

每次我尝试使用Mustache.js节标记来模板化json中的内容时,永远不会传递或函数中断。我不确定我做错了什么,厌倦了通过论坛和过去的问题寻找解决方案。如果有人能帮助我,我将非常感激。

这是我的功能:

$('body').on('click', '.logo', function(){
        alert('clicked');
        var request1 = $.ajax({
                url: "js/projects.js",
                dataType:'json',
            }).then(function(response){
                    var data = response.projects;
                    var template = $('#testing_tmp').html();
                    var project = Mustache.to_html(template, data);
                    return project;
            });
            $.when(request1).then(function(t) {
                $('#header').html(t);

            });
        });

这是我的模板胡子:

<script id="testing_tmp" type="text/template">
    {{#projects}}
        <div class='testingMus'>
            <div class='project'><figure><img src='{{{largePic}}}' alt='' />
            <figcaption class='caption'><span>{{genre}}</span></figcaption class='caption'></figure></div>
           </div>
        </div>
    {{/projects}}
    </script>

我的json示例:

{
    "projects":[
        {
            "id":"0",
            "title":"Heller Recipes", 
            "description":"This web applications was developed to keep track of my dads recipes and make them easily accesible.He is now able to check each user and make a dinner based on what everybody likes or in some cases dont like. ",
            "technologiesUsed":"CodeIgniter, PHP, Sequel Pro, Javascript, jQuery,HTML5, CSS3, SASS, Foundation 5.0",
            "projectLink":"http://www.google.com",
            "genre":"web-app",
            "largePic":"img/projects/heller-recipes/thumb.jpg", 
            "desktopImg":"img/projects/heller-recipes/desktop.png",
            "desktopMobile":"img/projects/heller-recipes/mobile.png"
        },  
        {
            "id":"1",
            "title":"3D Animation", 
            "description":"Created using 4D Cinema Max, a 3d anitmation program that allows you to create realistic renderings and animations.",
            "technologiesUsed":"CodeIgniter, PHP, Sequel Pro, Javascript, jQuery,HTML5, CSS3, SASS, Foundation 5.0",
            "projectLink":"http://www.google.com",
            "genre":"3d",
            "largePic":"img/projects/4dmax.jpg",
            "desktopImg":"img/projects/heller-recipes/desktop.png",
            "desktopMobile":"img/projects/heller-recipes/mobile.png"
        }
    ]
}

1 个答案:

答案 0 :(得分:1)

您的模板中有{{#projects}}{{/projects}},但在成功回调中,您将response.projects传递给模板。因此,根元素是一个数组,而不是包含属性projects的对象。

您需要直接将response传递给您的模板。