我的 RequireJS 依赖链出了什么问题?

发布于 2024-12-12 07:09:42 字数 1709 浏览 0 评论 0原文

我刚刚开始使用 RequireJS,看来我没有正确表达我的依赖关系。我正在尝试映射一个相当简单的依赖关系链:

KnockoutJS 取决于 jquery-tmpl 取决于 jquery

我试图不使用 <代码>require-jquery。在我的 HTML 中,我这样做:

<script data-main="scripts/main" src="scripts/require.js"></script>

我的 main.js:

require(
  {
    baseUrl: 'scripts',
    paths: {
        jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min',
        jquerytmpl: "require-jquery-tmpl",
        knockout: "require-knockout"
    }
  },
  ["myApp"],
  function() {
        $(function() {
            console.log('main: triggered');
        });
  }
);

我的 require-jquery-tmpl.js:

define([
  "order!jquery",
  "order!http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"], 
  function() {
    console.log("init tmpl");
  }
);

我的require-knockout.js

define([
  "order!jquerytmpl",
  "order!./scripts/knockout-1.2.1.js"], 
  function() {
        console.log("init ko");
  }
);

最后,myApp.js

define(["knockout"], function() {
    $(function() { ... }
}

我看到的是knockout-1.2.1.js是在 jquery-tmpl.js 之前加载和评估。 console.log 显示 init tmpl 发生在 init ko 之前,因此 RequireJS 回调按正确的顺序触发。但是,我在 Knockout 中添加了一些调试日志,我可以看到它在 init tmpl 发生之前就已被评估。

结果,当我尝试 ko.applyBindings() 时,它抱怨找不到 jQuery 模板。有趣的是,如果我手动告诉 KO 在回调中注册默认模板引擎,它工作正常并且一切都很完美。但是,我认为这只是掩盖了核心问题。

为什么 RequireJS 不等到 jquery-tmpl 加载后再评估 Knockout?

I'm just getting started with RequireJS and it appears I'm not expressing my dependencies correctly. I'm trying to map a fairly straightforward dependency chain:

KnockoutJS depends on jquery-tmpl depends on jquery

I'm trying not to use require-jquery. In my HTML, I do this:

<script data-main="scripts/main" src="scripts/require.js"></script>

My main.js:

require(
  {
    baseUrl: 'scripts',
    paths: {
        jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min',
        jquerytmpl: "require-jquery-tmpl",
        knockout: "require-knockout"
    }
  },
  ["myApp"],
  function() {
        $(function() {
            console.log('main: triggered');
        });
  }
);

My require-jquery-tmpl.js:

define([
  "order!jquery",
  "order!http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"], 
  function() {
    console.log("init tmpl");
  }
);

My require-knockout.js:

define([
  "order!jquerytmpl",
  "order!./scripts/knockout-1.2.1.js"], 
  function() {
        console.log("init ko");
  }
);

And finally, myApp.js:

define(["knockout"], function() {
    $(function() { ... }
}

What I'm seeing is that knockout-1.2.1.js is getting loaded and evaluated before jquery-tmpl.js. The console.logs show that init tmpl happens before init ko, so the RequireJS callbacks are firing in the right order. But, I added some debug logs in Knockout and I can see that it's getting evaluated way before init tmpl happens.

As a result, when I try to ko.applyBindings(), it complains that jQuery templates can't be found. The funny thing is that if I manually tell KO to register the default template engine in the callback, it works fine and everything's perfect. But, I think that's just masking the core issue.

Why isn't RequireJS waiting until jquery-tmpl is loaded before evaluating Knockout?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

月亮邮递员 2024-12-19 07:09:42

我无法诊断实际问题,但我通过在模块定义的部分中使用 require 而不是 define 来使我的依赖项正常工作。对我有用的配置如下所示:

My main.js:

require(
  {
    baseUrl: 'scripts',
    paths: {
        jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min',
        jquerytmpl: "require-jquery-tmpl",
        knockout: "require-knockout"
    }
  },
  ["myApp"],
  function() {
        $(function() {
            console.log('main: triggered');
        });
  }
);

My require-jquery-tmpl.js:

define(["jquery"], function() {
    require(["order!http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"], function() {
        console.log("init tmpl");
    });
});

请注意,我说的是 require jquery.tmpl.js 和 order,而不是在 define 依赖项中列出它。

require-knockout.js 进行相同的更改:

define(["jquerytmpl"], function() {
    require(["order!knockout-1.2.1.js"], function() {
        console.log("init ko");
    });
});

解决了我的问题,但我仍然没有解释为什么 RequreJs order 插件无法按照我的原始定义正常工作。

I haven't been able to diagnose the actual problem, but I got my dependencies working by using require instead of define in parts of the module definition. The configuration that works for me looks like this:

My main.js:

require(
  {
    baseUrl: 'scripts',
    paths: {
        jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min',
        jquerytmpl: "require-jquery-tmpl",
        knockout: "require-knockout"
    }
  },
  ["myApp"],
  function() {
        $(function() {
            console.log('main: triggered');
        });
  }
);

My require-jquery-tmpl.js:

define(["jquery"], function() {
    require(["order!http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"], function() {
        console.log("init tmpl");
    });
});

Notice I'm saying require jquery.tmpl.js with order instead of listing it in the define dependencies.

Same change to require-knockout.js:

define(["jquerytmpl"], function() {
    require(["order!knockout-1.2.1.js"], function() {
        console.log("init ko");
    });
});

This fixes my problem, but I still do not have an explanation for why the RequreJs order plugin doesn't work correctly with my original definitions.

江湖彼岸 2024-12-19 07:09:42

您的 scripts 目录中是否有 order.js 文件?

另外,requirejs 网站建议当您还想要时使用 require-jquery.js 而不是 require.js包括 jquery.我一直用它没有问题。

Do you have the order.js file in your scripts directory?

Also, the requirejs site suggests using require-jquery.js instead of require.js when you also want to include jquery. I've always used that without problems.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文