[英]Scripterror when using RequireJS with .NET controls
我在RequireJS方面遇到了一些问题。
我有一个.NET网站,其中包含几个包含JS代码的控件,这些代码需要.NET生成的参数。 我一直在尝试在自己的网站中实现RequireJS,但遇到一个小问题。
我已经在页面顶部添加了引用RequireJS的脚本标签,以及在该脚本标签中对main.js的引用。 在main.js中,我有以下代码;
require.config({
paths: {
'jquery' : '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min'
}
});
然后,我有一个应该显示Flash视频的Web控件。 该Web控件包含以下代码;
require(['jquery'], function ($) {
if (!eval('<%= FlashAvailable.ToString().ToLowerInvariant() %>')) {
var url = '<%= FallbackImageUrl %>';
if (!url) {
$("#flashcontent").remove();
}
return;
}
var link = '<%= Page.ResolveUrl("~/Templates/AlloyTech/scripts/slideshow.swf") %>';
var width = '<%= Width %>';
var height = '<%= Height %>';
var variables = { xml: '<%= ConfigXml %>' };
var params = { wmode: 'transparent' };
var attributes = { };
swfobject.embedSWF(link, 'flashcontent', width, height, '10', false, variables, params, attributes);
});
这应该工作正常吧? 但是,执行页面会导致两组错误。
1. GET http://episerversite6/scripts/jquery.js 404 (Not Found)
2. Uncaught Error: Script error http://requirejs.org/docs/errors.html#scripterror
当我定义了jquery的路径为“ http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min”时,为什么要尝试查找jquery.js。 我尝试为该路径添加第二个参数,这是一个本地后备jQuery文件,并且可以使所有工作正常进行,但是我仍然会在控制台中遇到第一个错误。
其次,为什么我会收到scripterror消息? 我检查了我的代码几次,似乎找不到任何错误。 它与jQuery有时间加载之前执行的代码有关吗?
所以我想我要问的是,将RequireJS与内联脚本一起使用的最佳方法是什么? 我希望有人能帮帮忙。 提前致谢。
看来我误解了RequireJS的工作方式,并需要相应地重写我的代码。
因此,我决定要做的是将所有ASP.NET生成的变量附加到它们所影响的元素上,作为data- *属性,并将所有JavaScript代码移动到单个文件中,然后在页面上运行的main.js脚本中对其进行引用加载。 加载脚本及其依赖项之后,将获取data- *属性值。
因此,这就是我对第一个问题提到的项目所做的事情,该项目实际上是一个称为Alloytech的EPiServer CMS演示项目。
Flash.ascx
<div id='flashcontent' data-flash-available="<%= FlashAvailable.ToString(CultureInfo.InvariantCulture).ToLowerInvariant() %>"
data-fallback-image="<%= FallbackImageUrl %>"
data-flash-link="<%= Page.ResolveUrl("~/Templates/AlloyTech/scripts/slideshow.swf") %>"
data-flash-width="<%= Width %>"
data-flash-height="<%= Height %>"
data-flash-variables="<%= ConfigXml %>">
<img src='<%= FallbackImageUrl %>' alt='<%= FallbackImageAlt %>' />
</div>
main.js
require.config({
shim: {
'swfobject' : {
exports: 'swfobject'
}
},
paths: {
'jquery': ['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min', '/Scripts/jquery-1.7.2.min'],
'alloytech': '/templates/alloytech/scripts/alloytech',
'mobile': '/templates/alloytech/scripts/mobile/mobile',
'swfobject': '/Templates/AlloyTech/scripts/swfobject'
}
});
define(['jquery', 'alloytech', 'mobile', 'swfobject'], function ($, A, M, swfobject) {
$.fn.addFlash = function () {
return this.each(function () {
var el = $(this);
var flashAvailable = el.data('flash-available'),
fallbackImage = el.data('fallback-image'),
flashLink = el.data('flash-link'),
flashWidth = el.data('flash-width'),
flashHeight = el.data('flash-height'),
flashVariables = el.data('flash-variables');
if (!eval(flashAvailable)) {
var url = fallbackImage;
if (!url) {
el.remove();
}
return;
}
var link = flashLink;
var width = flashWidth;
var height = flashHeight;
var variables = { xml: flashVariables };
var params = { wmode: 'transparent' };
var attributes = {};
swfobject.embedSWF(link, 'flashcontent', width, height, '10', false, variables, params, attributes);
});
};
$(function () {
$("#flashcontent").addFlash();
});
});
我希望其他人会觉得有用。
在配置路径加载之前,它会寻找所需的模块“ jquery”。 因此,基本上require.js会假设“ jquery”是一个javascript文件,并尝试在与“ data-main”(在HTML标头中定义)相同的目录中查找它。
我不知道如何解决这种特殊情况,因为我正在打同样的仗,但这似乎与jquery.js创建者打算通过此页面的内容判断使用其插件的方式不同: 常见错误
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.