爲什麼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，但未加載視圖。我必須重新加載頁面，網址爲#home才能加載主頁視圖。

注意：Backbone.history.navigate("viewname", { trigger: true });會產生相同的結果。更改網址但不路由到查看。

---

我的路由器代碼適用於：

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與該字符串「匹配」。

'：'後面的strign將是'* actions'在你的url上時骨幹將會調用的函數名稱。

在你的情況下，你沒有稱爲「defaultAction」的功能。這是問題所在。

現在爲了改善你的代碼，我相信你可以爲你想要的每個視圖創建一個函數。它可以讓你根據你的url導航和渲染正確的視圖。

例子：

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

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

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

這種方式，您可以通過使用應用程序的網址導航：

youapp.com/#home（將呈現主頁視圖） youapp.com/#index（會渲染索引視圖）