每次我尝试使用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"
}
]
}
答案 0 :(得分:1)
您的模板中有{{#projects}}{{/projects}}
,但在成功回调中,您将response.projects
传递给模板。因此,根元素是一个数组,而不是包含属性projects
的对象。
您需要直接将response
传递给您的模板。