Question

我目前正在使用jQuery和Ajax处理项目，将内容从本地html文件加载到我的单页网站。我还有一个JSON文件，我试图将其合并到使用jQuery和Ajax加载的文件中。

我使用哈希网址将页面分开。这是我使用的代码：

//other cached links
var pageLinks = $(".pageLink");

if(window.location.hash) {
    var hash = window.location.hash.replace("#", "");
    loadPage(hash + ".html");
} else {
    loadPage("index.html");
}

pageLinks
    .click(function(){
        var iid = $(this).attr("id");
        loadPage(iid + ".html");
    });

function loadPage(resource) {
    window.location.hash = resource.replace(".html", "");
    $.get("pages/" + resource, function (data) {
        content.html(data);
    });
}

//this makes sure the contents of hash in the url is loaded in the page
if(window.location.hash) {
    var hash = window.location.hash.replace("#", "");
    loadPage(hash + ".html");
} else {
    loadPage("index.html");
}

这就是我将JSON数据放入页面的方式：

function FooBar() {
this.foo;
this.barLinkTemplate;
}

var fooBar = new FooBar();

$(document).ready(function (){

fooBar.contentDiv = $("#fooContent");
fooBar.barDiv = $("#bars");

$.when(
    $.getJSON('data/music.json'),
    $.ajax('components/components.html')
).done( function(data, templateData) {
        var templateHTML = $(templateData[0]);

        fooBar.barLinkTemplate = Handlebars.compile( templateHTML.find("#barLinks").html() );

        fooBar.data = data[0].foo;

        fooBar.barDiv.html( fooBar.barLinkTemplate( data[0].bars ));
        ));
    });

Ajax加载很好，哈希和所有。但是，我的JSON文件中没有任何内容加载到页面中。我想我已经把我的问题缩小了（至少我希望）到一点代码。如果我注释掉最后一个if / else语句（上面），则会在第一页（仅第一页）中加载JSON。如果我单击任何链接，然后我导航回该页面，JSON数据就会消失。我必须重新加载页面才能重新出现数据。

如果没有if / else语句，我将失去从网址中的哈希加载页面内容的能力 - 尽管链接仍然可以正常工作。

我一直在谷歌搜索，但我还没有看到类似于我遇到的问题。任何帮助表示赞赏。谢谢！

在使用Ajax和hash url加载页面时无法加载JSON

0 个答案: