0

我试图让我的应用程序在页面之间的导航方面完全 ajaxified（使用 Backbone.js 路由）。

所以我基本上做了我想做的一切，所有页面都正确加载，除了主页之外没有页面刷新。我隔离了为什么会发生这种情况，但我不知道如何修复它。对于以前使用过单页应用程序的任何人来说，这可能是一个非常简单的问题。

所以基本上我有这些主干路线：

    routes: {
        "": "renderHome",
        "!/:page": "renderPage"
    },
    renderHome: function () {
        pageView.render("Home");
    },
    renderPage: function (page) {
        pageView.render(page);
    }

Backbone PageView 具有如下渲染方法：

 render: function (page) {
        $(this.el).load("Navigation/" + page);
 }

基本上， /Navigation/anypage 通过 ajax 加载（不刷新），但 /Navigation/Home 会导致页面刷新。

但是，如果我简单地更改主页锚上的href FROM：

<a class="navigationTab" href=""><span>Home</span></a>

到：

<a class="navigationTab" href="#!/Home"><span>Home</span></a>

它按应有的方式工作。但是我不希望我的主页是 www.website.com/#!/Home 那太丑了！！

如何保持主页的原始格式（没有主题标签）并且仍然可以在不刷新页面的情况下加载它。

我怀疑这是因为将 window.location.hash 更改为空白值会使其重新加载页面，但如果有一个标签，它就像转到页面的不同部分，所以不需要重新加载。我怎样才能防止这种情况？

$('.navigationTab').click(function (event) {
    event.preventDefault();
    window.location.hash = $(this).attr('href');
});
4

1 回答 1

0

基本上，主题标签所做的是将 url 设置为相同的 url，但在其中添加 #(page) ......您可以通过在最后手动访问的任何页面上添加哈希来尝试，页面不会刷新.

你有两个选择

选项一 - 使用 pushState

这是一个很长的故事，您可能需要修改整个网站和服务器结构，因为在使用 pushState 时您可能会删除所有主题标签。

选项二 - 用标签设置家

<a class="navigationTab" href="/#"><span>Home</span></a>

通过这样做，您会将路由器设置为 Home，但最后会有一个标签

于 2012-04-22T17:40:09.583 回答