标签: backbone-routing

我正在尝试实现{ pushState : true }它,但它只适用于基本路由,而不是与另一个继续给我错误404.

在Chrome中,如果我访问:

http://example.app/ - 确定显示控制台消息

http://example.app/show - 返回错误404

我的路线是

    var AppRouter = Backbone.Router.extend({

    routes: {
        '': 'index',
            'show': 'show'
        },

        index: function() {
            console.log('This is the index page');
        },
        show: function() {
            console.log('This is the show page');
        }

    });

    new AppRouter;
    Backbone.history.start({pushState: true});

我的.htaccess

<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !index
   RewriteRule (.*) index.html [L]
</ifModule>

我错过了什么,或者我做错了什么？

我目前正在为我的SPA使用Backbone路由器.它有点工作,但我有一些小问题:

问题是-我想要么有pushState导航或没有,意思-应用程序状态被执行(当我通过"初始" URL路由器或我触发通过JS的路线),但地址栏不会改变.我不希望IE9的hashChange回退.如果IE9没有获得后退按钮和更改的地址栏,它仍将正常工作,但仍保留应用程序中的导航状态.然后,我可以向用户显示他们可以加入书签的URL,服务器将路由该页面,并且应用程序状态将根据初始URL进行引导.在应用内导航期间,IE中的地址栏不会改变,这是我愿意接受的妥协.

navigate(url, {trigger: true})我遇到的另一个问题是我用于拦截的HREF,后退按钮不起作用(什么都不做).但我真的需要在前进/后退导航中更改应用状态,即使它为特定URL重建 - 我宁愿重建状态.

对于我可以使用的路由器,我有哪些选择？就像我说的,我不希望有hashbang回退(意思是 - 我只想在应用程序中使用一种表示URL的方式).

我该怎么用？Director.js？History.js？似乎有相当多的路由器/历史库,但哪一个最接近我正在寻找的？

我将我的应用分成几个应用程序.

main.js
app.js
app1/
  |- routing
  |- controller
  |- app
app2/
  |- routing
  |- controller
  |- app

1)当我尝试使用路由器时app1,它们可以工作.
2)当我尝试使用路由器时app2,它们不起作用.
3)如果我在工作'js/app1/routing',中main.js的路由器中注释该行app2.

为什么我会这样做？
是否有一些应用程序在github上使用多个路由和requirejs的例子？

谢谢.

这是我的代码:

**main.js**

define([
    'js/app',
    'js/app1/routing', // the routers in this app work
    'js/app2/routing'  // the routers in this app do not work but 
                       // if I comment the previous line (js/app1/routing',) 
                       // they works
],
function (App)
{
    "use strict";
    App.initialize();
});

**app.js**

define([],
function ()
{ …

我知道最佳实践说"你的内容必须在页面加载时可用",我这样做了.如果用户导航到/questionnaire/info/id/2,PHP将提供完整的html.但是在此之后问题出现了,backbone.js匹配相同的路由并重新请求同一页面并用ajax加载它.

如何禁用当前页面首次加载的主干？

我正在尝试在执行路由回调之前将路由重定向到另一个路由.我有以下代码:

console.log("file loaded");
(function (History) {
    var _navigate = History.prototype.navigate;

    _.extend(History.prototype, {
        navigate: function (fragment, opts) {
            alert("adad");
            return _navigate.call(this, fragment, opts);
        }
    });
})(Backbone.History);

此代码包装Backbone.History.navigate方法,并在方法调用上显示警报.但是当我改变路线时,这个警报永远不会出现.

该console.log行只是为了确保在backbone.js之后加载了文件.

这段代码有什么问题？

我一直在做关于backbone.js中的嵌套视图的一堆阅读,我理解了很多,但有一点让我感到困惑的是这......

如果我的应用程序有一个shell视图,其中包含在使用应用程序过程中不会改变的页面导航,页脚等子视图,我是否需要为每个路径渲染shell或者我是否做某种检查视图以查看它是否已存在？

如果有人在应用程序中前进之前没有点击"主页"路线,那对我来说似乎是这样.

我在google搜索中没有找到任何有用的信息,所以任何建议都表示赞赏.

谢谢!

当我使用Backbone.js基于哈希的路由时,我将如何使用Bootstrap的Scrollspy？

Backbone路由器示例,它创建页面www.example.com/#somePage/123

var AppRouter = Backbone.Router.extend({
   routes: {
      "": "home",
      "somePage/:id": "somePage"
   },
   somePage: function (id) {
      console.log("do something");
   }
});

$(document).ready(function(){
   window.app = new AppRouter();
   Backbone.history.start();
});    

Twitter scrollSpy示例,它应该将#anchor-value附加到URL的末尾:

 <div id="navbar" class="row-fluid">
        <ul class="nav nav-pills navbar">
            <li class="active">
                <a href="#step1">1</a>
            </li>
            <li>
                <a href="#step2">2</a>
            </li>
      </ul>
    </div>
    <div data-spy="scroll" data-target=".navbar">
        <h4 id="step1">Step 1</h4>
        <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles …

我正在使用Backbone.js路由器在用户点击某些URL路由时触发某些初始化方法.所以/posts/1通过一个vanilla锚标签应该触发/posts/:id我的Backbone路由器中与之关联的任何回调.这在Backbone.history.start({ pushState : true })设置时在现代浏览器中工作正常.但是,在IE中,尝试命中的用户/posts/1将被重定向到/#posts/1,这只是我的主页,其中包含无意义的哈希字符串.

要清楚,我不需要pushState.我不是试图将 URL 推送到浏览器历史记录.我只是想读取它们,然后触发回调,这在任何浏览器中都应该是可行的.

看起来像简单的功能,但我很难过.

谢谢!

我是backbone.js的初学者.
我的页面导航如下所示:

左侧导航定义了四种视图类型,而顶部导航应该更新数据模型并重新渲染当前视图(这就是我的想法).
我想允许用户根据他/她的个人偏好为当前视图和类别添加书签(并且可能将设置存储在浏览器的本地存储中).
这两个菜单可以互换使用,这意味着用户可以决定使用当前类别的模型显示不同的视图,并且用户可以在当前视图中选择不同的类别.

我无法确定如何以稳定的方式为此配置路由器.
请注意,此路径后面可能还有其他参数,例如基于profile_id在地图上显示活动标记.

现在,我有想法做这样的事情:

var AppRouter = Backbone.Router.extend({
        routes: {
            ":view/:category": "aggregatefunction" 
        }
    });

但我不确定这是否会引导我达到我的需要.
由于我想要交替使用这些菜单并使它们可收藏,我已经开始坚持创建链接了.

您能否就结构给我一些建议,并告诉我潜在的陷阱,以帮助我在路上？
任何补充建议当然也是受欢迎的.
谢谢

编辑
对于奖金,我想阅读更多的意见.
我仍然在动态地构建和调整菜单锚标签中的hrefs时遇到一些麻烦,同时能够触发事件(更改类别/或更改视图).我正在寻找这个问题最稳定的解决方案.
如果可能的话,每个插图都附带一些代码.
谢谢.

我有一个使用Backbone 0.5.3的工作应用程序,它不再使用主干0.9.2.

我发现Router.navigate()由于某种原因没有调用我的路由.

这是我的路由器:

var Router = Backbone.Router.extend({
    routes: {
      '/mypage': 'mypage', 
    },

    mypage: function() { 
      // show page ...
   }
});

像这样手动调用路由工作正常:

Router.mypage()

我还试图覆盖骨干的.navigate方法来调试我的应用程序...

var Router = Backbone.Router.extend({
    routes: {
      '/mypage': 'mypage', 
    },

    navigate: function(fragment, options) {
      console.log("navigate called");
      Backbone.history.navigate(fragment, options);
    },

    mypage: function() { 
      // show page ...
   }
});

......似乎.navigate被调用但是......

Backbone.history.navigate(fragment, options);

......只是不打电话给路线.

我正在使用PushState,这是我的初始调用:

Backbone.history.start({ 
  root: '/',
  pushState: true,
  silent: true
});

已经尝试过没有root和silent参数 - 没有成功.

再次:这使用Backbone 0.5.3.

感谢大家的回复!

阿希姆