[英]Knockout with require.js - not looking for knockout in my configured 'paths' section
I'm developing a multi-page app, using requirejs to manage my javascript libs / dependencies. 我正在开发一个多页面应用程序,使用requirejs来管理我的JavaScript库/依赖项。 My idea is that i'll have a main.js that holds the config, and then an .js file for each page that needs it, for example "register.js"
我的想法是,我将拥有一个保存配置的main.js,然后是需要它的每个页面的.js文件,例如“ register.js”
My require config is in javascripts/main.js
我的要求配置在
javascripts/main.js
requirejs.config({
baseUrl: '/javascripts',
waitSeconds: 200,
paths: {
'async': 'lib/require.async',
'jquery': 'lib/jquery-1.7.2.min',
'knockout': 'lib/knockout-3.0.0'
});
I've got a knockout view model that looks like this: javascripts/viewModels/userDetailsViewModel.js 我有一个看起来像这样的剔除视图模型:javascripts / viewModels / userDetailsViewModel.js
define(['knockout'], function(ko) {
return function() {
var self = this;
self.name = ko.observable();
self.email = ko.observable();
});
My 'entry point' is javascripts/register.js 我的“入口”是javascripts / register.js
require(['./main', 'knockout', 'viewModels/userDetailsViewModel'], function(main, ko, userDetailsViewModel) {
ko.applyBindings(new userDetailsViewModel());
});
On my register.html page, i've got the script reference like this: 在我的register.html页面上,我有如下脚本参考:
<script data-main="/javascripts/register" src="/javascripts/lib/require.js"></script>
When my page loads, I get these errors in the console: 页面加载后,在控制台中出现以下错误:
GET
http://localhost:3000/javascripts/knockout.js
404 (Not Found)GET
http://localhost:3000/javascripts/knockout.js
404(未找到)
and 和
Uncaught Error: Script error for: knockout
未捕获的错误:脚本错误:淘汰赛
I'm not sure why it's looking for knockout.js
- I've specified knockout in the paths section of my config, to look in lib/knockout-3.0.0 我不确定为什么要寻找
knockout.js
我在配置的paths部分中指定了基因敲除,以查看lib / knockout-3.0.0。
My dir structure is: 我的目录结构是:
javascripts/ JavaScript的/
Most of my pages js files go here 我的大部分页面js文件都放在这里
javascripts/viewModels JavaScript的/的ViewModels
Has knockout viewmodels 具有剔除视图模型
javascripts/lib Contains knockout, jquery, requirejs etc... javascripts / lib包含敲除,jquery,requirejs等...
The problem is that RequireJS will execute the call require(['./main', 'knockout', 'viewModels/userDetailsViewModel']
without a configuration. Yes, ./main
is listed before knockout
but there is no order guarantee between the dependencies passed in a single require
call. RequireJS may load ./main
first, or knockout
first. And even if ./main
were loaded first by this specific call, I believe it would not have any impact on how the other modules loaded by this call would load. That is, I think this require
would operate on the basis of the configuration that existed at the time it was called , and that any configuration changes caused by the modules it loads would take effect only for subsequent require
calls. 问题是,RequireJS将执行调用
require(['./main', 'knockout', 'viewModels/userDetailsViewModel']
没有的配置。是的, ./main
是上市前knockout
,但存在依赖关系之间没有为了保证在一个单一的通过require
调用。RequireJS可以加载./main
第一,还是knockout
第一。即使./main
被这个特定的呼叫第一次加载,我相信它会不会对其他模块通过这个调用加载方式造成任何影响也就是说,我认为此require
将在调用时已存在的配置的基础上运行,并且由其加载的模块引起的任何配置更改将仅对后续的 require
调用有效。
There are many ways to fix this. 有很多方法可以解决此问题。 This should work:
这应该工作:
require(['./main', function(main) {
require(['knockout', 'viewModels/userDetailsViewModel'], function(ko, userDetailsViewModel) {
ko.applyBindings(new userDetailsViewModel());
});
});
Or you might want to restructure your files and what you pass to data-main
so that your requirejs.config
is loaded and executed before your first require
call. 或者,您可能想要重组文件以及传递给
data-main
文件,以便在第一次调用require
之前加载并执行requirejs.config
。 Here's an example of restructuring. 这是重组的示例。 Change your entry point to be
/javascripts/main.js
: 将您的入口点更改为
/javascripts/main.js
:
<script data-main="/javascripts/main.js" src="/javascripts/lib/require.js"></script>
Change /javascripts/main.js
so that it contains: 更改
/javascripts/main.js
,使其包含:
requirejs.config({
baseUrl: '/javascripts',
waitSeconds: 200,
paths: {
'async': 'lib/require.async',
'jquery': 'lib/jquery-1.7.2.min',
'knockout': 'lib/knockout-3.0.0'
});
require(['knockout', 'viewModels/userDetailsViewModel'], function(ko, userDetailsViewModel) {
ko.applyBindings(new userDetailsViewModel());
});
And remove /javascripts/register.js
. 并删除
/javascripts/register.js
。 This would be one way to do it. 这将是一种方法。 However, it is hard for me to tell whether this would be what you want in your specific project, because I do not know the whole project.
但是,由于我不了解整个项目,因此很难确定这是否是您在特定项目中想要的。 The way to restructure for your specific project really depends on what other pages might use RequireJS, what information is common to all pages, what is specific to each page, whether you use a template system to produce HTML, etc.
重组特定项目的方法实际上取决于其他哪些页面可能使用RequireJS,所有页面共有哪些信息,每个页面特定于什么,是否使用模板系统生成HTML等。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.