我在Mustache js的帮助下建立一个网站。顶部导航中有相当多的数据。
问题是我加载html的时间大约有一半，导航没有加载/丢失 - 输出是一个空div：
<div id="nav"> </div>
这是html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<script type="text/javascript" src="js/lib/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/lib/mustache.js"></script>
<script type="text/javascript" src="js/templates.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
</head>
<body id="productPage">
<div id="header">
{{{header}}}
<div id="nav">
{{{nav}}}
</div>
</div>
...
...
...
以下是模板：
var Templates = {
'header': '<div id="headerWrapper">' +
'<div id="logo" class="left"><img src="images/logo.png" /></div>'+
'<div class="right">'+
'<div class="search"></div>'+
'<div class="login">Login</div>'+
'</div>' +
'<ul class="user_type">'+
'{{#user_type_list}}'+
'<li><a href="{{user_type_element_link}}">{{user_type_element_text}}</a></li>'+
'{{/user_type_list}}'+
'</ul>'+
'<div id="menuWrapper" class="clearfix"></div>' +
'<div class="clearfix"></div> ' +
'</div>',
'nav': '<ul id="menu">' +
'{{#menu_links}}' +
'<li class="menu_top" id="{{menu_id}}">' +
'<a href="{{menu_link}}">{{menu_text}}</a>' +
'<div class="menu_content"></div>' +
'</li>' +
'{{/menu_links}}' +
'</ul>',
'products_services': '<div class="submenu">' +
'<ul class="top_list left">' +
'{{#top_list}}' +
'<li class="top_list_elem">' +
'<a href="{{top_list_link}}">{{top_list_text}}</a>' +
'<div class="extraInfo">' +
'<div class="categories">' +
'<ul>' +
'{{#categories}}' +
'<li class="category">' +
'<div class="cat_name">{{category_name}}</div>' +
'<ul class="subcategories">' +
'{{#subcategories}}' +
'<li class="sub_category"><a href="{{subcategory_link}}">{{subcategory_name}}</a></li>' +
'{{/subcategories}}' +
'</ul>' +
'</li>' +
'{{/categories}}' +
'</ul>' +
'</div>' +
'<div class="teasers">' +
'{{#teasers}}' +
'<div class="teaser">' +
'<a href="{{teaser_link}}">' +
'<img src="images/nav_teaser.jpg"/>' +
'</a>' +
'<div class="caption">' +
'<a href="{{teaser_link}}">{{teaser_caption}}</a>' +
'</div>' +
'</div>' +
'{{/teasers}}' +
'</div>' +
'</div>'+
'</li>' +
'{{/top_list}}' +
'</ul>' +
'{{#appointment}}' +
'<div class="right"><a href="#">Appointment</a></div>' +
'{{/appointment}}' +
'</div>',
'footer': '<div id="footerWrapper" class="clearfix">' +
'<ul>' +
'{{#footer_list}}' +
'<li>' +
'<div class="title">{{footer_title}}' +
'</div>' +
'<ul>' +
'{{#footer_sub_list}}' +
'<li>' +
'<a href="{{footer_sub_link}}" class="{{footer_sub_link_class}}">' +
'{{footer_sub_link_title}}' +
'</a>' +
'</li>' +
'{{/footer_sub_list}}' +
'</ul>' +
'</li>' +
'{{/footer_list}}' +
'</ul>' +
'</div>'
}
这是主要的js：
jQuery(document).ready(function($){
$.templates = function(page)
{
var plugin = this;
var mustache;
plugin.init = function() {
getHeader();
getNav();
getFooter();
}
var getHeader = function(){
...
};
var getNav = function(){
var template = Templates.nav;
var pages = ["products_services"];
// setTimeout(function() {
$.ajax({
type: "GET",
url: "data/menu.json",
dataType: "JSON",
success: function(data) {
$('#menuWrapper').html(Mustache.render(template, data));
$.each(pages, function(key, val){
var template = Templates[val];
$.ajax({
type: "GET",
url: "data/"+val+".json",
dataType: "JSON",
success: function(data) {
var html = Mustache.render(template, data);
var menuContent = $('#'+val).find('.menu_content');
menuContent.html(html);
menuContent.find('.top_list_elem').bind('mouseenter', function(){
var categories = $(this).find('.categories');
var teasers = $(this).find('.teasers');
var categoriesH = categories.outerHeight(true);
var teasersH = teasers.outerHeight();
var height;
if((categories.width() + teasers.width()) > $(window).width())
height = categoriesH + teasersH;
else
height = Math.max(categoriesH, teasersH);
menuContent.height(height + 50);
});
menuContent.bind('mouseleave', function(){
$(this).height('');
});
}
});
});
}
})/*;},30)*/;
};
var getFooter = function(){
...
};
plugin.init();
}
$.fn.templates = function(page)
{
return this.each(function()
{
if (undefined == $(this).data('templates'))
{
var plugin = new $.templates(page);
$(this).data('templates', plugin);
}
});
}
var body = $('body');
var page = body.attr('id');
body.templates(page);
});
如果它对任何事情都有帮助....：如果我添加了注释掉它的timeOut函数，但是当我模拟慢速互联网连接时，问题仍然存在..
json文件：
menu.json：
{
"menu_links": [
{
"menu_link": "#",
"menu_text": "link1",
"menu_id": "link1"
},
{
"menu_link": "#",
"menu_text": "link2",
"menu_id": "link2"
},
{
"menu_link": "#",
"menu_text": "link3",
"menu_id": "link3"
},
{
"menu_link": "#",
"menu_text": "link4",
"menu_id": "link4"
}
]
}
products_services.json非常长，所以这里有一个片段：
{
"top_list": [
{
"top_list_link": "#",
"top_list_text": "Top List Text",
"categories": [
{
"category_name": "Name",
"subcategories": [
{
"subcategory_link": "#",
"subcategory_name": "Subcategory name 1"
},
{
"subcategory_link": "#",
"subcategory_name": "Subcategory name 1"
},
{
"subcategory_link": "#",
"subcategory_name": "Subcategory name 1"
},
{
"subcategory_link": "#",
"subcategory_name": "Subcategory name 1"
},
{
"subcategory_link": "#",
"subcategory_name": "Subcategory name 1"
...
...
我希望我提供了足够的信息。 提前谢谢你的答案！
答案 0 :(得分：0)
我们使用javascript对象而不是json加载数据，它可以正常工作......