Javascript Requirejs带敲除错误:无法处理绑定“组件:函数(){return f}”-不匹配的匿名定义()模块
我在所有浏览器中都会看到错误。我说无法处理绑定组件。。。。我读过很多文章,包括requirejs网站。我已经检查了导致错误的原因,但是我不知道它们是否适用于我的代码。据我所知,我没有使用script标记手动加载任何东西,每个模块都加载了requirejs 我用yoman:yo ko创建了一个淘汰赛项目。之后,使用yo-ko:component[组件名称]添加组件。页面在大多数情况下加载良好,但会定期出现以下错误。当我使用两个组件时,频率似乎增加了。我编辑了新组件并删除了对敲除对象的引用,错误仍然会发生,尽管没有那么频繁 准确的误差如下:Javascript Requirejs带敲除错误:无法处理绑定“组件:函数(){return f}”-不匹配的匿名定义()模块,javascript,knockout.js,requirejs,Javascript,Knockout.js,Requirejs,我在所有浏览器中都会看到错误。我说无法处理绑定组件。。。。我读过很多文章,包括requirejs网站。我已经检查了导致错误的原因,但是我不知道它们是否适用于我的代码。据我所知,我没有使用script标记手动加载任何东西,每个模块都加载了requirejs 我用yoman:yo ko创建了一个淘汰赛项目。之后,使用yo-ko:component[组件名称]添加组件。页面在大多数情况下加载良好,但会定期出现以下错误。当我使用两个组件时,频率似乎增加了。我编辑了新组件并删除了对敲除对象的引用,错误仍然
Uncaught Error: Unable to process binding "component: function (){return f}"
Message: Mismatched anonymous define() module: function (a){function b(a){return h.raw?a:encodeURIComponent(a)}function c(a){return h.raw?a:decodeURIComponent(a)}function d(a){return b(h.json?JSON.stringify(a):String(a))}function e(a){0===a.indexOf('"')&&(a=a.slice(1,-1).replace(/\\"/g,'"').replace(/\\\\/g,"\\"));try{return a=decodeURIComponent(a.replace(g," ")),h.json?JSON.parse(a):a}catch(b){}}function f(b,c){var d=h.raw?b:e(b);return a.isFunction(c)?c(d):d}var g=/\+/g,h=a.cookie=function(e,g,i){if(void 0!==g&&!a.isFunction(g)){if(i=a.extend({},h.defaults,i),"number"==typeof i.expires){var j=i.expires,k=i.expires=new Date;k.setTime(+k+864e5*j)}return document.cookie=[b(e),"=",d(g),i.expires?"; expires="+i.expires.toUTCString():"",i.path?"; path="+i.path:"",i.domain?"; domain="+i.domain:"",i.secure?"; secure":""].join("")}for(var l=e?void 0:{},m=document.cookie?document.cookie.split("; "):[],n=0,o=m.length;o>n;n++){var p=m[n].split("="),q=c(p.shift()),r=p.join("=");if(e&&e===q){l=f(r,g);break}e||void 0===(r=f(r))||(l[q]=r)}return l};h.defaults={},a.removeCookie=function(b,c){return void 0===a.cookie(b)?!1:(a.cookie(b,"",a.extend({},c,{expires:-1})),!a.cookie(b))}}
http://requirejs.org/docs/errors.html#mismatch
下面是文件中的一些代码(如果有帮助的话)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ko-cai</title>
<!-- build:css -->
<link href="bower_modules/semantic/dist/semantic.css" rel="stylesheet">
<link href="bower_modules/c3/c3.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<!-- endbuild -->
<!-- build:js -->
<script src="app/require.config.js"></script>
<script data-main="app/startup" src="bower_modules/requirejs/require.js"></script>
<!-- endbuild -->
</head>
<body>
<div>
<!--<side-bar></side-bar>
<page-container></page-container>-->
<dashboard></dashboard>
this is a test
</div>
</body>
</html>
dashboard.html
<h2>dashboard</h2>
<p data-bind='text: message'></p>
我做错了什么?
我如何解决这一问题,因为它使测试变得非常困难?
在哪里可以检查哪些已知问题适用于我的代码,以便寻找修复方法。
你看过requirejs文档了吗?更准确地说,您发布的错误链接后面的列表: 要避免此错误,请执行以下操作: 确保通过RequireJSAPI加载所有调用define的脚本。 不要在HTML中手动编写脚本标记以加载具有 在其中定义调用。 如果手动编写HTML脚本标记,请确保它只包含 命名模块,并且该匿名模块将具有相同的 名称,因为该文件中的一个模块未加载。 如果问题是使用加载程序插件或匿名模块,但是 RequireJS优化器不用于文件绑定,请使用 RequireJS优化器。 如果问题是var define lint方法,请使用/*global define */在全局注释样式之前没有空格。
经过进一步的调查,我终于想出了一个解决办法。也许不是最好的,但我还没看到另一个。这个问题与require.js有关。看起来,文件中包含的内容并不重要,我甚至尝试了一个带有空白函数的文件,但出现了不匹配错误。然而,我注意到,当我在错误后执行相同的require语句时,它实际上是有效的。我在knockout中添加了一个组件加载程序来获取组件的配置。下面是为我工作的装载机。希望它对某人有用,直到找到更好的解决方案,或者我们找到这个问题的根源
//register a custom loader
ko.components.loaders.unshift({
getConfig: function(name,callback){
ko.components.defaultLoader.getConfig(name, function(c){
if (c && c.require){ //do custom loading here. make first attempt to fetch the config
try{
require([c.require],function(config){
callback(config);
});
}catch(e){
//todo: check that this is mismatch error and try again. else throw exception
require([c.require], function(config){ //make the request again
callback(config);
});
}
} else {
callback(c);
}
})
}
});
您使用的是什么版本的requirejs和jquery?require.js是2.1.15,jquery是2.1.1。淘汰版是3.2.0我已经检查了文档。问题是我无法确定代码的哪一部分违反了任何错误。另外,它是不一致的,我编写的应用程序部分没有做任何这些。你知道如何确定这些被违反的地方吗?
/// <amd-dependency path="text!./dashboard.html" />
import ko = require("knockout");
export var template: string = require("text!./dashboard.html");
export class viewModel {
public message = ko.observable("Hello from the dashboard component too!");
constructor (params: any) {
}
public dispose() {
// This runs when the component is torn down. Put here any logic necessary to clean up,
// for example cancelling setTimeouts or disposing Knockout subscriptions/computeds.
}
}
define(["require", "exports", "knockout", "text!./dashboard.html"], function(require, exports, ko) {
exports.template = require("text!./dashboard.html");
var viewModel = (function () {
function viewModel(params) {
this.message = ko.observable("Hello from the dashboard component too!");
}
viewModel.prototype.dispose = function () {
// This runs when the component is torn down. Put here any logic necessary to clean up,
// for example cancelling setTimeouts or disposing Knockout subscriptions/computeds.
};
return viewModel;
})();
exports.viewModel = viewModel;
});
//# sourceMappingURL=dashboard.js.map
//register a custom loader
ko.components.loaders.unshift({
getConfig: function(name,callback){
ko.components.defaultLoader.getConfig(name, function(c){
if (c && c.require){ //do custom loading here. make first attempt to fetch the config
try{
require([c.require],function(config){
callback(config);
});
}catch(e){
//todo: check that this is mismatch error and try again. else throw exception
require([c.require], function(config){ //make the request again
callback(config);
});
}
} else {
callback(c);
}
})
}
});