Question

这是我在index.html中的A标记。

<div class="menu-item"><a href="/#login">Login in</a>

如果我点击它，它应该转到'/ login'路线。但是URL正确地更改为localhost：3333 /＃登录浏览器地址输入栏，但页面内容显示没有变化，仍在登录页面中。

以下是启动Backbone历史记录的代码：

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

这是我的路由器代码：

var Backbone = require('backbone');
var $ = require('jquery');
    Backbone.$ = $;
var _ = require('lodash');

var Marionette = require('backbone.marionette');
var OuterLayout = require('../layout/outerLayout/outerLayout');
var ol = new OuterLayout();
var AppRouter = Backbone.Marionette.AppRouter.extend({
    routes : {
        '': 'index',
        'signup' : 'signup', 
        'login' : 'login'
    }, 
    index : function () {
        if(_.isEmpty(ol.el.innerHTML)) {
            ol.render();
        } 

        // outerLayout.footer.show();    
    }, 
    signup : function () {
        if(_.isEmpty(ol.el.innerHTML)) {
            ol.render();
        }
        var ContentSignup = require('../layout/outerLayout/view/contentSignup/contentSignup');

        ol.content.show(new ContentSignup());
    }, 
    login: function () {
        if(_.isEmpty(ol.el.innerHTML)) {
            ol.render();
        }
        var ContentLogin = require('../layout/outerLayout/view/contentLogin/contentLogin');

        ol.content.show(new ContentLogin());
    }    
});

module.exports = AppRouter;

结果是在浏览器地址输入字段中更改了URL，但页面内容不会更改。然后，如果我点击CMD + R刷新页面，那么内容将会改变，正确反映路线。

此外，浏览器上的返回按钮不起作用，网址也会更改，但内容不会更改。我想我忘了在我的代码中打电话来“刷新”浏览器？

哦，我正在使用httpster为这个前端开发启动一个迷你http服务器。

Answer 1

你试过这个：

new AppRouter();

而不是

new Router();

Answer 2

除非你真的想要点击服务器（它只是/login并且你在服务器端处理它）。你应该采取pub sub方法。

所以在你看来你会说：

触发器 “click .menu-item”：“loginClicked”

然后在您的控制器中，您可以收听该事件（如果它是一个复合视图的子视图，您可能必须使用childview:作为前缀）：

@listenTo loginView, "login:button:clicked", (args) ->
  App.vent.trigger "login:clicked"

然后在路由器

API =
    login: ->
      new LoginsApp.Show.Controller

  App.vent.on "login:clicked", ->
    App.navigate "/login" 
    API.login()

因此，您最终导航/执行与通过路由器相同的操作，但您不必依赖路线。

如果您不想走这条路线，我想问题是您需要说Backbone.history.navigate({trigger: true})才能让它在approuter中实际触发路线。

我发现的最佳方法是，当用户点击刷新或直接导航到页面时，approuter就在那里。但是应该使用pub子方法在应用程序中处理其他所有内容。它为您提供了最大程度的控制。

Answer 3

删除斜杠（/）并在hrefs上仅使用“#route”，以避免浏览器从后端获取“/”提供的默认文档。

顺便说一句，注意你对require的使用，你应该要求顶层的构造函数，以便requirejs优化器可以填充构建时的依赖。

类似的东西：

//this before the component definition
var MyView = require("views/myview"),
    AppLayout = require("views/layout");

//... later on your view/app/model definition

function foo(){
  var view = new MyView();
}

我还认为在任何文件的顶部都有一个require d列表，有助于以后理解它。 ;）

木偶/骨干应用程序，标签中的href不会转到定义的路线

3 个答案: