Backbone + RequireJS:使用RequireJS加载的HTML文件被解释为JS文件

Question

我想推出Backbone.js + Require.js.我可以加载模块就好了.但是当我尝试使用文本加载我的.html文件时!插件(text.js),我收到这些错误:

资源解释为脚本但使用MIME类型text/html传输:" https://host.net/templates/login.html ".require.js:1843

未捕获的SyntaxError:意外的令牌<login.html:1

未捕获的TypeError:无法调用undefined underscore.js:1130的方法'replace'

这是我正在使用的规范:

浏览器:Chrome

服务器端:PHP w/Slim

机器:具有bitnami AMI的AWS微实体//这些东西附带生产默认设置,因此可能Apache配置不正确,或者php.ini不正确.我只是不知道是什么.

目录结构:

/
   dev/    // Webroot: Behind basic_auth for dev reasons
       web/
           index.php    // Starts up the Slim router and PHP backend 
               app/
                   app.html    // The entry point for our SPA, data-main defined here
       js/   // At root for module accessibility in case of reuse
           apps/
           app/
               main.js  // Here we do require.config and bootstrapping
           app.js   
           router.js
           text.js
           modules/
               models/
                   login.js
               views/
                   login.js
           lib/
                   backbone/
                   backbone.js
               jquery/
                   jquery.js
               require/
               require.js
               underscore/
               underscore.js
       templates/   // Also at root for access to reuseable markup, such as login.html
        login.html

以下是我认为相关的一些代码:

/js/apps/app/main.js

requirejs.config({
 baseUrl: '/js/apps/app',

  shim: {
    'backbone' : {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    },
    'underscore' : {
      exports: '_'
    },
    'jquery' : {
      exports: '$'
    },
    'backbone.ajaxcommands' : {
      deps : ['backbone', 'underscore', 'jquery'],
    }
  },

  paths: {
    jquery:     'lib/jquery/jquery-1.9.1.min',
    underscore: 'lib/underscore/underscore',
    backbone:   'lib/backbone/backbone-min'
  },

  config: {
    text: {
      useXhr: function (url, protocol, hostname, port)
      {
        protocol = 'https';
  //      return true; 
      }
    }
  }
});
require(['app'],function(App){
    App.initialize(); 
    App.start(); 
  }
); 

/js/apps/app/modules/views/login.js

define([
  'backbone',
  'underscore',
  'modules/views/login',
  'text!/templates/login.html'
], function(Backbone, _, Login, loginTemplate){
  var LoginView = Backbone.View.extend({
    el: $("#login-form"),

    events: {
      "click #login": "login"
    },

    template: _.template(loginTemplate),

    initialize: function(){
      var self = this; 

      this.username = $("#username"); 
      this.password = $("#password"); 

      this.username.change(function(e){
        self.model.set({username: $(e.currentTarget).val()});
      }); 

      this.password.change(function(e){
        self.model.set({password: $(e.currentTarget).val()}); 
      });

    },

    login: function(){
      var user= this.model.get('username'); 
      var pword= this.model.get('password'); 
      if(this.model.save() == false)
      {
        console.log("We got issues loggin' in"); 
      }
      else
      {
        console.log("We should have cookies now"); 
      }
    }

    //render: function(){
    //  this.$el.append(this.template); 
    //}
  });
  return LoginView; 
}); 

/templates/login.html

`<div>hi</div>`

努力寻找解决方案: 当我查看Chrome调试器时,在"网络"标签下,我看到确实检索到了login.html,但chrome认为它是一个JS文件.

我使用断点逐步完成代码,并发现在Require.js 1843中,该行上的节点对象有一个名为"outerHtml"的属性,它等于带有一堆属性的"'标签.那么也许它将我的html包装在标签中？当我查看调试器的网络选项卡中的预览选项卡时,我确实看到了标记.如果login.html具有有效的js代码,那么我不会得到语法错误.我仍然得到underscore.js错误,因为它的格式错误的html.

我已经尝试过这些解决方案: Chrome说"资源被解释为脚本但是使用MIME类型text/plain传输.",是什么给出的？

在项目下移动js /模板代码(使路径相对而不是绝对).一切似乎都有效,但text.js会将.js附加到login.html的末尾,所以我找不到404.这是因为跨域访问是偶然的？

require.config的各种配置选项,包括设置baseURL

我遗憾地忘记了大量的其他调整.这真是令人沮丧.

感谢您的时间.

编辑: 我已经放置了一个独立的,表现出我在驱动器上看到的相同行为.文件结构应该是:

/
    index.html //This can actually be anywhere visible on the web
    so-js/
        ...
    so-templates/
        ...

注意到so-js /和so-templates都在webroot上,索引文件可以在哪里.

Answer 1

问题是由这条线引起的:

   config: {
    text: {
      useXhr: function (url, protocol, hostname, port)
      {
        protocol = 'https';
      //  return true; 
      }
    }
  }

它覆盖了文本!的useXhr方法,它意味着返回一个布尔值来确定文本文件的Javascript版本是否可用.如果是,它将返回false,否则为true.

因为你没有返回任何内容而undefined是假的,所以它需要它应该在<script>标记中加载它,这就是你得到MIME类型警告和后续错误的原因.

如果删除整个配置属性,则错误消失,loginCMmplate将填入login.html.