Question

我在“需要Js / Backbone Js / Marionette Js应用程序”中遇到“Backbone.history.start（{pushState：true}）”问题，所有RequireJs依赖项都在正确的文件夹中。

这是我的问题：app完美运行，没有“pushState：true”参数都要求按预期加载模块，但是因为没有pushState参数“＃”在url中显示因此从URL中删除＃我使用了Backbone.history.start （{pushState：true}）。但是，一旦我将{pushState：true}作为参数添加到顶级app.js文件中的Backbone.history.start（），requireJs模块会更改其加载路径，并提供404（未找到）错误并且无法加载要求模块整个代码崩溃。那么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/cmMessageController.js 404（未找到）

CmMessageController的实际路径是
../ JS /应用/控制器/ cmMessageController.js

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

Answer 1

如果您想使用pushState功能，您的服务器响应应该与所有路由器的页面相同。（是的，您应该将服务器配置为使用pushState）。

例如，您有路线"messages/:id":"showMessage"。

在您使用pushState之前，如果您要查看路线messages/2，则会使用网址/index.html#messages/2，浏览器会向GET /index.html发送请求，这没关系。

但是，在使用pushState后，如果您要查看路线messages/2，则会使用网址/messages/2，浏览器会向GET /messages/2发送请求，如果您不配置服务器，服务器将返回404错误，因为您的文件夹中没有文件/messages/2！如何解决这个问题呢？在收到index.html请求时，您可以明确地将服务器与/messages/2的响应内容相对应。如果您使用的是Nginx，可以参考Rewriting nginx for pushState-URL's。

Backbone pushState无法加载requireJs模块

1 个答案: