javascript - 刷新 hasher JS/crossroads JS 路由

标签 javascript jquery handlebars.js crossroadsjs

我在一个由 handlebarsJS 提供支持的 SPA 上使用 crossroadsJS 和 hasherJS。回想起来,我可能应该在 Ember 上构建整个东西,但已经晚了,重新开始并不明智。

我设置了哈希路由,可以根据点击的内容切换我的 Handlebars 模板。我可以毫无问题地在路线之间来回移动。但是,如果我刷新页面,我总是会回到我的#/home View 。我对 window.onhashchange 和 window.onbeforeunload 做了一些研究,但这些似乎都没有解决问题。

我有一个非常具体的方式来处理我的观点。我有一个像这样构造的全局 View 对象:

views.procedures = function (template) {

    this.initialize = function () {
        this.el = $('<div/>');
        this.el.attr('id', 'procedures');
        this.el.on('click', '.returned-list li a', this.toResults); // list of API objects by name
    };

    this.render = function () {
        var parts = {
            title: 'Procedures View',
        };
        this.el.html(template(parts));
        return this;
    };

    this.toResults = function () {
        cache.justClicked = $(this).attr('data-id');

        crossroads.addRoute('procedures/{name}', function () {
            api.endpoints.procedure(cache.justClicked); // constructed elsewhere
        });
    };

    this.initialize();
};

我提到这一点是因为我不能简单地为 $(document).ready()$(window).onhashchange< 中的任何类型的哈希更改添加 JQuery 监听器

我已经多次阅读 hasherJS 和 crossroadsJS 文档,但我想不出任何解决刷新问题的方法。在此先感谢您的帮助。

最佳答案

我需要你提供更多信息,但我假设你正在做

var DEFAULT_HASH = 'home';

if (! hasher.getHash()) {
    hasher.setHash(DEFAULT_HASH);
}

这基本上是说您的默认路线始终是您的归宿路线,这就是为什么您在刷新当前路线时会看到它。尝试以下操作:

var DEFAULT_HASH = 'home', url = hasher.getBaseURL();

if (hasher.getURL() === url) {
    hasher.setHash(DEFAULT_HASH);
}

这将检查您的基本 URL 是什么(您第一次访问该页面时加载的那个)并将 #/home 路由附加到基本 URL,允许您刷新当前查看路线。

希望这对您有所帮助。

关于javascript - 刷新 hasher JS/crossroads JS 路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27713801/

相关文章:

javascript - 如何在 angular.js 中调用 ng-title 属性上的作用域函数

javascript - iOS ui 隐藏页面底部。当隐藏和显示 iOS 底部菜单时,如何使整个页面响应并使其底部始终可见?

JavaScript onChange 处理程序错误

javascript - 这个 Typescript 类如何与这个接口(interface)兼容

javascript - 我们如何自定义排序 JavaScript 对象键?

javascript - jQuery 在搜索中突出显示单词

javascript - 滚动 div 后如何将 Bootstrap 导航栏固定到顶部?

javascript - <li><p>text</p></li> 上点击事件中的未定义文本

javascript - 使用 Ember.js 和 Handlebars,将模板绑定(bind)到类 View 与 View 实例之间有什么区别?

ember.js - 在 ember.js 中创建自定义未绑定(bind)助手