使用RequireJS和.NET控件時的Scripterror

我在RequireJS中遇到了一些問題。使用RequireJS和.NET控件時的Scripterror

我有一個.NET網站的幾個控件，其中包含需要由.NET生成的參數的JS代碼。我一直在試圖在我的網站中實現RequireJS，但我遇到了一個小問題。

我已經在頁面頂部包含了引用RequireJS的腳本標記，並且引用了該腳本標記中的main.js。在我的main.js中，我有以下代碼;

require.config({ 
    paths: { 
     'jquery' : '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min' 
    } 
});

然後，我有一個網絡控制，應該顯示一個Flash視頻。該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的路徑是「找到的jquery.js http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min 」。我已經嘗試爲路徑添加第二個參數，這是一個本地回退jQuery文件，並且這使所有的工作，但我仍然在我的控制檯中得到第一個錯誤。

其次，爲什麼我會收到scripterror消息？我檢查過我的代碼幾次，我似乎無法找到任何問題。它是否與jQuery有時間加載之前正在執行的代碼有關？

所以我想我問的是什麼是使用RequireJS與內聯腳本的最佳方式？我希望有人能幫幫忙。提前致謝。

來源

2012-06-22 Dzulqarnain Nasir

看來我誤解了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(); 
    }); 
});

我希望別人會發現這很有用。

來源

2012-08-07 15:15:51

它在配置路徑加載之前查找所需的模塊「jquery」。所以基本上，require.js是否假定「jquery」是一個JavaScript文件，並試圖在與您的「data-main」（在HTML標頭中定義）相同的目錄中查找它。

我不知道這個特定情況下的解決方案是什麼，因爲我正在同一場戰鬥中戰鬥，但這似乎與jquery.js創建者打算使用插件來判斷內容的方式不同這個頁面：Common Errors

來源

2012-08-01 01:04:28 Nippysaurus

使用RequireJS和.NET控件時的Scripterror

回答

相關問題