Question

我目前正在参与Durandal项目，并在我的应用程序中研究Knockout Components的使用。我正在使用Gulp和gulp-durandal插件进行构建，并将其配置为使用杏仁。

我遇到了导航到我使用新注册组件的某个网页时收到以下错误的问题：

component：function（）{return componentBindingValue; }＆＃34;信息：组件＆＃39; myComponent＆＃39;：使用require，但不存在AMD加载器

希望提供尽可能多的信息，这里是我目前正在使用的gulp文件。

＆＃13;

var gulp = require('gulp');
var durandal = require('gulp-durandal');

gulp.task('durandal', function() {
    durandal({
        baseDir: 'app',
        main: 'main.js',
        output: 'main-built.js',
        almond: true,
        minify: true,
        rjsConfigAdapter: function (rjsConfig) {
            rjsConfig.paths = {
                'text': '../Scripts/text',
                'durandal': '../Scripts/durandal',
                'plugins': '../Scripts/durandal/plugins',
                'transitions': '../Scripts/durandal/transitions',
                'dataservice': 'domain/dataservice'
            };

            return rjsConfig;
        }
    }).pipe(gulp.dest('build'));
});

＆＃13;

Answer 1

Durandal Gulp任务使用 wrap 参数调用r.js，该参数被配置为将您的应用程序代码封装在带有Almond源的IFFE中。不幸的是，Almond的 require，requirejs和define 实现被捆绑在内部，而不是像Knockout期望的那样被添加到全局窗口范围。

您可以在 rjsConfigAdapter 中操作wrap参数来删除IFFE包装器，或者只是在应用程序代码的第一件事中将require / define添加到窗口对象中以解决此问题。

实施例

requirejs.config(config);
window.require = require;
window.requirejs = requirejs;
window.define = define;

Answer 2

我也碰到了这个，但我有一个更简单的前端堆栈，我只在一个页面上看到它，即使我在我的网站上使用该组件的几个地方。

原来它也可能是竞争条件。我必须将ko.applyBindings置于document.ready回调中，一切正常。

淘汰组件“使用需要，但没有AMD加载器”

2 个答案: