骨干+ RequireJS：加载HTML RequireJS文件PTED为JS文件间$ P $ [英] Backbone + RequireJS: HTML files loaded with RequireJS are interpreted as JS files
问题描述
我想与Backbone.js的+ Require.js来部署。我可以加载模块就好了。但是，当我尝试使用文本载入我的.html文件！插件（text.js），我得到这些错误：
I would like to rollout with Backbone.js + Require.js. I can load modules just fine. But when I try and load my .html files using the text! plugin (text.js), I get these errors:
资源间preTED为脚本，但使用MIME类型text / html转移的 https://host.net/templates/login.html 。 require.js：1843 的
Resource interpreted as Script but transferred with MIME type text/html: "https://host.net/templates/login.html". require.js:1843
未捕获的SyntaxError：意外的令牌LT; login.html的：1 的
Uncaught SyntaxError: Unexpected token < login.html:1
未捕获类型错误：无法调用未定义underscore.js的替换：1130 的
Uncaught TypeError: Cannot call method 'replace' of undefined underscore.js:1130
下面就是我的工作的规格：
Here's the specs of what I'm working with:
浏览器的：Chrome浏览器
Browser: Chrome
的 服务器端的：PHP瓦特/修身
Server-Side: PHP w/ Slim
机的：AWS微实例与bitnami AMI //这些东西附带生产的默认设置，所以它可能是可能是一个Apache的配置是不正确的，或者php.ini中是不正确的。我只是不知道是什么。
Machines: AWS micro-instance with bitnami AMI // These things ship with production defaults set, so it could be possible that an Apache config isn't right, or a php.ini isn't correct. I just don't know what.
目录结构：
/
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
这里的一些code，我相信相关的：
的 /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文件。
Work to find solution: When I look at the Chrome debugger, under the 'network' tab, I see that indeed login.html was retrieved, but chrome thinks it's a JS file.
我在code踩到使用断点，发现Require.js 1843年该行的节点对象有一个名为outerHtml'等于'与一群属性标签的属性。因此，也许这是我的包裹中的HTML标记？当我看到在调试器的网络选项卡中的preVIEW选项卡下，我确实看到了标记。如果有login.html的JS有效code，那么我没有得到的语法错误。我仍然得到underscore.js错误，因为它是畸形的HTML虽然。
I stepped through the code using a breakpoint, and found that in Require.js 1843 the node object on that line has an attribute called 'outerHtml' equal to a '' tag with a bunch of attributes. So perhaps it is wrapping my html in a tag? When I look under the preview tab in the network tab of the debugger, I indeed see the markup. If login.html has valid js code, then I don't get the syntax error. I still get the underscore.js error because it's malformed html though.
我试过这些解决方案：
<一href=\"http://stackoverflow.com/questions/3467404/chrome-says-resource-inter$p$pted-as-script-but-transferred-with-mime-type-text\">Chrome说＆QUOT;？资源间preTED为脚本，但MIME类型文本转/纯＆QUOT ;,什么给
I've tried these solutions: Chrome says "Resource interpreted as script but transferred with MIME type text/plain.", what gives?
移动项目下的JS /模板code（由路径，而不是相对绝对）。一切似乎都工作，但text.js将追加.js文件的login.html年底，所以我就没有找到404。这是因为跨域访问aparentally？
Moving the js/template code under the project (made paths relative instead of absolute). Everything seemed to work, but text.js would append .js to the end of login.html, so I got a 404 not found. This is because of cross-domain access aparentally?
各种配置选项与require.config，包括设置BASEURL
various config options with require.config, including setting the baseURL
吨，我已经忘记了不幸其他调整的。这一直是很无奈。
tons of other tweaks that I have unfortunately forgotten. This has been really frustrating.
感谢您的时间。
编辑：
我已经把一个独立的表现出我看到在我的硬盘。文件结构应该是：
/
index.html //This can actually be anywhere visible on the web
so-js/
...
so-templates/
...
公告称，所谓的JS /等模板是在根目录，索引文件可以是在以往任何时候。
notice that the so-js/ and so-templates are at the webroot, the index file can be where ever.
推荐答案
该问题是由该行造成的：
The problem is caused by this line:
config: {
text: {
useXhr: function (url, protocol, hostname, port)
{
protocol = 'https';
// return true;
}
}
}
这是压倒一切的文字！的useXhr方法，其目的是要返回一个布尔值来确定文本文件的JavaScript版本是否可用。如果是，它会返回false，否则为true。
It's overriding text!'s useXhr method, which is meant to return a boolean to determine whether a Javascript version of the text file is available. If it is, it'll return false, otherwise true.
由于你不返回任何东西和undefined是falsy，它需要这意味着它应该加载在＆LT;脚本＆GT;标签，这就是为什么你得到的MIME类型的警告和后续错误。
Because you're not returning anything and undefined is falsy, it takes that to mean that it should load it in a <script> tag, which is why you get the MIME type warning and the subsequent errors.
如果您删除整个配置属性错误消失，loginTemplate在login.html的填充。
If you remove this entire config property the errors go away and loginTemplate is populated in login.html.
这篇关于骨干+ RequireJS：加载HTML RequireJS文件PTED为JS文件间$ P $的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
