Requirejs带有Knockout错误:无法处理绑定“;组件:函数(）｛return f｝"-匿名定义(）

Requirejs with Knockout error: Unable to process binding "component: function (){return f}" - Mismatched anonymous defined() module

本文关键字：return quot 定义函数错误 Knockout 带有处理组件绑定 Requirejs 更新时间：2023-09-26

我在所有浏览器中都收到了错误。我说"无法处理绑定"组件"…"。我读了很多文章，包括requirejs网站。我已经检查了导致错误的原因，但我不知道它们是否适用于我的代码。据我所知，我没有使用脚本标记手动加载任何内容，每个模块都加载了requirej。

我用yoman:yo ko创建了一个淘汰赛项目。然后使用CCD_ 2添加组件。页面在大多数情况下加载良好，但会定期出现以下错误。当我使用两个组件时，频率似乎增加了。我编辑了新组件并删除了对敲除对象的引用，错误仍然会发生，尽管没有那么频繁。

准确的错误如下：

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>

require.config.js

// require.js looks for the following global when initializing
var require = {
    baseUrl: ".",
    paths: {
        "crossroads":           "bower_modules/crossroads/dist/crossroads.min",
        "hasher":               "bower_modules/hasher/dist/js/hasher.min",
        "jquery":               "bower_modules/jquery/dist/jquery",
        "knockout":             "bower_modules/knockout/dist/knockout",
        "knockout-projections": "bower_modules/knockout-projections/dist/knockout-projections",
        "signals":              "bower_modules/js-signals/dist/signals.min",
        "text":                 "bower_modules/requirejs-text/text",
        "semantic":             "bower_modules/semantic/dist/semantic",
        "lodash":               "bower_modules/lodash/dist/lodash",
        "c3": "bower_modules/c3/c3",
        "d3": "bower_modules/d3/d3",
        "config":               "../../cai/config",
        "observations":         "../../cai/observations"
    },
    shim: {
        "semantic": { deps: ["jquery"] },
        "c3": { deps: ["d3"]},
        "config": { deps: ["knockout"]},
        "observations": { deps: ["knockout","jquery"]}
    }
};

dashboard.html

<h2>dashboard</h2>
<p data-bind='text: message'></p>

仪表板.ts

/// <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.
    }
}

dashboard.js

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

我做错了什么
我该如何解决这个问题，因为它使测试变得非常困难
在哪里可以检查哪些已知问题适用于我的代码，以便查找修复程序

经过更多的调查，我找到了解决方案。可能不是最好的，但我还没有看到另一个。这个问题与require.js有关。文件中包含的内容似乎并不重要（我甚至尝试了一个带有空白函数的文件，但得到了不匹配的错误）。然而，我注意到，当我在错误后执行相同的require语句时，它实际上是有效的。我添加了一个组件加载程序来获取组件的Config。下面是为我工作的加载器。希望它对某人有用，直到找到更好的解决方案或我们弄清这个问题的真相。

//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文档吗？更确切地说，你发布的错误链接后面的列表：

为了避免错误：

请确保加载所有通过RequireJS API调用define（）的脚本。不要在HTML中手动编写脚本标记以加载具有define（）调用它们
如果手动编写HTML脚本标记，请确保它只包含命名模块，并且将具有相同名称作为该文件中的一个模块
如果问题是使用加载插件或匿名模块，但是RequireJS优化器不用于文件绑定，请使用RequireJS优化器
如果问题是var define lint方法，请使用/*global define*/（在"全局"之前没有空格）改为注释样式

http://requirejs.org/docs/errors.html#mismatch