骨干pushState无法加载requireJs模块

Question

我对"Backbone.history "有一个问题。start({pushState: true})在require Js/Backbone Js/Marionette Js应用中，RequireJs的所有依赖项都在正确的文件夹中。

这是我的问题:应用程序在没有"pushState:true"参数的情况下正常工作，所有模块都需要按预期加载，但由于没有pushState参数"#"显示在url中，因此要从url中删除#，我使用了Backbone.history。start({pushState: true})。然而，一旦我将{pushState: true}作为参数添加到顶层app.js文件中的Backbone.history.start()中，requireJs模块就会改变它的加载路径，并给出404(未找到)错误，它无法加载require模块，整个代码就会崩溃。pushState的问题是什么?或者它是如何工作的?

这是我的代码App.js

define(['jquery', 'backbone', 'marionette', 'underscore', 'handlebars','init/configuration'],
function ($, Backbone, Marionette, _, Handlebars,config) {
     var MyApp = new Backbone.Marionette.Application();
    MyApp.addRegions({
         mainRegion:"#main"
    });
   MyApp.navigate = function(route,  options){
         options || (options = {});
        Backbone.history.navigate(route, options);
  };
    MyApp.getCurrentRoute = function(){
      return Backbone.history.fragment
  };
    MyApp.addInitializer(function () 
    {
        if(Backbone.history)
        {
        require(["js/app/routers/cmMessageRouter.js",], function () {
              Backbone.history.start({ pushState: true});
                if(MyApp.getCurrentRoute() === "")
                {
                    MyApp.trigger("show:message",7);    
                }
            }); 
      };     
    });
   return MyApp;
  });

cmMessageRouter.js

  define(["app"],function(app){
app.module("Message",function(message, app, Backbone, Marionette, $, _){
    message.router=Backbone.Marionette.AppRouter.extend({
        appRoutes : {
            "messages/:id":"showMessage"
        }
    });

    var API = {
          showMessage : function(id)
          {
                 require(["controllers/cmMessageController"], function(controller){
                     var controllerObj=new controller.messageController();
                     controllerObj.showMessage(id);
                });
          }
    };

    app.on("show:message",function(id){
            app.navigate("messages/"+id,{trigger: true});
    }); 
    app.addInitializer(function(){
        new message.router({
                 controller: API
         });
     });
   });
    return app.Message;
 });

cmMessageController.js

    define(["app","views/cmMessageView"],function(app,messageView){
app.module("Message.Controller",function(controller,app,Backbone,Marionette, $, _){
    controller.messageController = Backbone.Marionette.Controller.extend({
    //gets mapped to in AppRouter's appRoutes
      showMessage:function(userid) {
        require(["collections/cmMessageCollection","collections/cmContactCollection"], function(collection) {
             var contacts = app.request("contact:items");
             var model = contacts.get(userid);
             app.currentFriend=model.toJSON();
             var messageObj = new collection.messageCollection([] , {roomId : app.currentFriend.roomid});
             messageObj.getMessages(app.currentFriend.roomid, function(res){
                    if(res=="success")
                        API.renderMessageList();
             });
          });
       },
    });
 });
    return app.Message.Controller;
});

在控制台中给出以下错误GET ../messages/js/app/controllers/cmmessageconcontroller .js 404 (Not Found)

CmMessageController的实际路径为
. ./js/app/controllers/cmMessageController.js

如何解决这个问题?我做错了什么?

Answer 1

如果您想使用pushState特性，您应该让您的服务器对所有路由器响应相同的页面。(是的，您应该配置您的服务器使用pushState)。

例如路由"messages/:id":"showMessage"。

在您使用pushState之前，如果您想查看路由messages/2，您将使用url /index.html#messages/2，浏览器将发送请求到GET /index.html，这是OK的。

然而，在使用pushState之后，如果你想查看路由messages/2，你将使用url /messages/2，浏览器将发送请求到GET /messages/2，如果你没有配置你的服务器，服务器将返回404错误，因为没有文件/messages/2在你的文件夹!如何解决这个问题?您可以显式地配置服务器在接收/messages/2请求时响应index.html的内容。如果你使用的是Nginx，你可以参考重写Nginx的pushState-URL。