为什么 Backbone.js 中的 router.navigate() 不加载所需的视图？

Question

我是 BackboneJS、RequireJS、JQuery 应用程序开发的新手。我想使用router.navigate() 更改当前视图。这是路由器配置：

 define([

    //Libraries to load
    "jquery",
    "underscore", 
    "backbone",
    "mustache",

    //Views to load
    "../views/Main",
    "../views/Login",
    "../views/Dashboard",
    "../views/Empty"

], function ($, _, Backbone, Mustache, MainView, LoginView, DashboardView, HomeView) {

    //All of the dependencies in the array above become parameters of the function to be managed
    'use strict';

    var AppRouter = Backbone.Router.extend({
        routes: {
            // Default
            '*actions': 'defaultAction'
        },
        loadView: function(view){
            this.view && (this.view.close ? this.view.close() : this.view.remove());
            this.view = view;
            this.view.render();
        }
    });

    var initialize = function(){
        var app_router = new AppRouter;
        app_router.on('route:defaultAction', function (actions) {
            switch (actions){
                case "login": this.loadView(new LoginView()); break;
                case "home": this.loadView(new HomeView()); break;
            } 
        });

        // Extend the View class to include a navigation method goTo (source: http://stackoverflow.com/questions/7755344/using-the-backbone-js-router-to-navigate-through-views-modularized-with-require)
        Backbone.View.prototype.goTo = function (loc) {
            app_router.navigate(loc, true);
        };
        Backbone.Model.prototype.goTo = function (loc) {
            app_router.navigate(loc, true);
        };
        Backbone.history.start();
    };



    return  {
        initialize: initialize
    };
});

在 Backbonejs 视图中，我使用以下代码更改/加载视图：

self.goTo("home");

但只更改 URL 中的主题标签。例如：#login 更改为#home，但不加载视图。我必须使用 URL #home 重新加载页面才能加载主视图。

注意：Backbone.history.navigate("viewname", { trigger: true }); 产生相同的结果。更改 URL 但不更改查看路径。

---

我的路由器代码已应用：

routes: {
        'login': 'renderLogin',
        'home': 'renderHome',
        // Default
        '*actions': 'renderDefault'
    },
    renderDefault: function(){
        this.view = new MainView();
        this.view.render();
    },
    renderLogin: function(){
        this.view = new LoginView();
        this.view.render();
    },
    renderHome: function(){
        this.view = new HomeView();
        this.view.render();
    }
}

Answer 1

它可能会在您的控制台上显示“defaultAction”不存在或未定义的消息。

当你声明你的路由时，你需要像这样遵循 backoneJS 的约定：

routes: {
      //Default
     '*actions': 'defaultAction'
    },

':' 之前的字符串是主干在浏览器 url 中“看到”或“听到”的内容。

如果 url 与该字符串“匹配”。

':' 后面的字符串将是当 '*actions' 在您的网址上时主干将调用的函数名称。

在您的情况下，您没有称为“defaultAction”的功能。这就是问题所在。

现在尝试改进您的代码，我相信您可以为所需的每个视图创建一个函数。它允许您根据您的 url 导航和呈现正确的视图。

例子：

routes{
    'index':'renderIndex'
    'home' : 'renderHome'
},

renderIndex: function(view){
     //render your Indexview
    },

renderHome: function(view){
     //render your Homeview
    }

这样您就可以使用 url 浏览您的应用程序：

youapp.com/#home（将呈现主页视图） youapp.com/#index（将呈现索引视图）