0

我想使用Backbone.js+Require.js进行部署。我可以很好地加载模块。但是当我尝试使用文本加载.html文件时!插件(text.js),我得到以下错误:

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

未捕获语法错误:意外标记<login.html:1

未捕获的类型错误:无法调用未定义下划线的方法“replace”。js:1130

以下是我正在使用的产品的规格:

浏览器:铬

服务器端:PHP w/苗条

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

目录结构:

/dev//Webroot:出于开发原因而隐藏basic_auth网络/index.php//启动Slim路由器和php后端应用程序/app.html//此处定义了SPA、data-main的入口点js///在root上,用于重用时的模块可访问性应用程序/应用程序/main.js//我们在这里进行require.config和引导应用.js路由器.js文本.js模块/模型/登录.js视图/登录.js图书馆/主干/主干.jsjquery(jquery)/jquery.js公司要求/必需品.js下划线/下核.jstemplates///也位于根目录,用于访问可重用标记,如login.html登录.html

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

/js/apps/app/main.js

requirejs.config(要求配置)({baseUrl:“/js/apps/app”,垫片:{“主干”:{deps:[“下划线”,“jquery”],exports:'主干'},“下划线”:{导出:'_'},“jquery”:{导出:“$”},“backbon.ajaxcommands”:{deps:[“主干”,“下划线”,“jquery”],}},路径:{jquery:“lib/jquery/jquery-1.9.1.min”,underline:“lib/aunderline/下划线”,backbone:'lib/backone/backbone-min'},配置:{文本:{useXhr:function(url、协议、主机名、端口){协议=“https”;//返回true;}}}});require([应用程序],函数(应用程序){App.initialize();应用程序启动();});

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

定义([“主干”,“下划线”,'模块/视图/登录','文本/templates/login.html”],函数(主干网,_,登录,登录模板){var LoginView=主干。视图.扩展({el:$(“登录表单”),事件:{“点击#login”:“登录”},模板:_.template(loginTemplate),初始化:函数(){var self=此;this.username=$(“#用户名”);this.password=$(“#密码”);this.username.change(功能(e){self.model.set({用户名:$(e.currentTarget).val()});}); this.password.change(功能(e){self.model.set({密码:$(e.currentTarget).val()});});},登录:函数(){var user=this.model.get(“用户名”);var密码=this.model.get('password');if(this.model.save()==false){console.log(“登录时出现问题”);}其他的{console.log(“我们现在应该有cookie”);}}//渲染:函数(){//这个$el.append(this.template);//}});return LoginView;});

/模板/login.html

`<div>高</div>`

努力寻找解决方案:当我查看“网络”选项卡下的Chrome调试器时,我看到确实检索到了login.html,但Chrome认为它是一个JS文件。

我使用断点遍历代码,发现在Require.js 1843中,该行上的节点对象有一个名为“outerHtml”的属性,该属性等于一个带有一组属性的“”标记。所以,也许它是将我的html包装在一个标记中?当我在调试器的网络选项卡中的预览选项卡下查看时,我确实看到了标记。如果login.html具有有效的js代码,那么我不会得到语法错误。我仍然收到underscore.js错误,因为它的html格式不正确。

我尝试过这些解决方案:Chrome表示“资源被解释为脚本,但使用MIME类型的text/plain进行传输。”?

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

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

不幸的是,我忘记了很多其他的调整。这真的很令人沮丧。

谢谢你抽出时间。

编辑:我在我的开车。文件结构应为:

/index.html//它实际上可以在web上的任何位置可见所以js/...so-模板/...

请注意,so-js/和so-templates位于webroot,索引文件可以放在任何位置。

  • 你有可能把这个(编辑过的)项目打包,这样我就可以复制它吗? 评论 2013年2月19日23:47
  • 我想是的……让我试试。 评论 2013年2月20日0:03
  • 好的,就在我的车道上。索引文件可以位于任何位置,但so-js和so-templates需要位于webroot。 评论 2013年2月20日0:29

2个答案2

重置为默认值
6
+100

问题是由以下线路引起的:

配置:{文本:{useXhr:function(url、协议、主机名、端口){协议=“https”;//返回true;}}}

它覆盖了文本!”s的useXhr方法,该方法旨在返回一个布尔值,以确定文本文件的Javascript版本是否可用。如果是,它将返回false,否则返回true。

因为您没有返回任何内容,而且undefined是falsy,所以这意味着它应该在<script>标记中加载它,这就是为什么会出现MIME类型警告和随后的错误。

如果删除整个配置属性,错误就会消失,loginTemplate将填充到login.html中。

2
  • 享受额外的重复!我可以发誓我曾经评论过那大块! 评论 2013年2月20日0:51
  • 哦,你要花22个小时才能收获你的甜点 评论 2013年2月20日0:58
0

也可以使用咕哝从html模板生成模块

这样地:

模板/hello.html

你好,世界</div(分频)>

js/templates/hello.js

define('templates/hello','<div>hello world!</div>')

grunt任务配置:

函数转换模板(srcDir){返回函数(){grunt.file.recurse(srcDir,函数(abspath,rootdir,subdir,文件名){if(/^.*\.html$/.test(文件名)){if(细分){subdir=subdir.replace(/\\/g,'/');}var content=grunt.file.read(abspath),targetPath='js/templates'+'/'+(subdir?subdir+'/':'')+文件名.replace('.html','.js'),moduleName='templates/'+(subdir?subdir+'/':'')+filename.replace'('.html','');content=content.replace(/[\t]*\r\n?\n[\t]*/g,'');content=content.replace(/'/g,'\\'');content=“define('“+moduleName+”',[],'”+content+“');”;subdir&&grunt.file.mkdir('js/templates/'+(subdir?subdin+'/':''));grunt.file.write(目标路径,内容);}});};}grunt.registerTask('template','conver-template',converTemplate('templates'));

目录结构:

模板/你好.htmljs型/模板/你好.js
2
  • 从grunt生成的.js文件中读取性能优势吗? 评论 2013年2月20日3:10
  • @Pandemonium辛迪加凹入压缩模板文件 评论 2013年2月20日3:43

你的答案

单击“发布您的答案”,表示您同意我们的服务条款并确认您已阅读我们的隐私政策.

不是你想要的答案吗?浏览标记的其他问题问你自己的问题.