Question

我正在尝试在我的html中的脚本标记内为我的应用程序的初始配置选项定义一个模块。但我收到以下错误：

Error: Module name "options" has not been loaded yet for context: _. Use require([]) http://requirejs.org/docs/errors.html#notloaded

这是html：

<script src="Scripts/require.js" data-main="/Recruiter/temp-search/App/main"></script>
<script> 

    define('options',['jquery'],function($) {        
        return options = {
            salesPhoneNumber : '@ConfigurationManager.AppSettings.Get("SalesPhoneNumber")',
            saleInfoMessage : "To access Temp Search candidate details, please call our team on " + salesPhoneNumber,
            subscriptionInfo : @Html.Raw(new JavaScriptSerializer().Serialize(Model.AccessInfo ?? null)),
            questionProLink: src="@(Request.Url.Scheme)://www.questionpro.com/a/TakeSurvey?id=@(Model.IsRecCon ? AppSettings.SurveyRecConId : AppSettings.SurveyOthersId)&amp;custom1=@Model.RecruiterEmail&amp;custom2=@Model.RecruiterId",
            surveyEnabled: '@AppSettings.FlexSurveyEnabled',
            whatsNewUrl: '@AppSettings.UrlWhatsNew',
            salesPhoneNumber:salesPhoneNumber,
            showSaleInfo: '@ViewBag.ShowSaleInfo',
            fileDownloadFailCookieName:'@AppSettings.FileDownloadFail',
            urls: {
                signInUrl: '@string.Format("https://{0}/recruiter/account/signIn", Url.RequestContext.HttpContext.Request.Url.Host)',
                signInTempsHome: '/recruiter/temp-search/home',
                signInTempsSearch: '/recruiter/temp-search/api/temps',
                checkAvailabilityUrl: '/recruiter/temp-search/api/availability',
                searchUrl: '/recruiter/temp-search/api/temps/search',
                accesslimitUrl: '/recruiter/temp-search/api/ecruiters/accessinfo',
                previewUrl: '/recruiter/temp-search/api/temps/preview'
            },
            elements: {
                signInRegisterDialog: $("#signInRegisterDialog"),
                noSubscriptionDialog: $("#noSubscriptionDialog"),
                searchForm: $("#searchForm"),
                searchKeywords: $("#Keywords"),
                searchLocation: $("#Location"),
                searchRadius: $("#Radius"),
                searchSortBy: $("#sortBy"),
                searchTemp: $("#Temporary"),
                searchContract: $("#Contract"),
                searchPayRateFrom: $("#PayRateFrom"),
                searchPayRateTo: $("#PayRateTo"),
                searchAvailability: $("#AvailabilityConfirmed"),
                locationErrorMsg: $("#locationErrorMsg"),
                checkAll: $(".checkAll"),
                checkCandidate: $(".checkCandidate"),
                availability: {
                    availabilityBtn: $("#availabilityBtn"),
                    availabilityDialog: $("#availabilityDialog"),
                    additionalInformation: $("#AdditionalInformation"),
                    jobPosition: $("#JobPosition"),
                    jobLocation: $("#JobLocation"),
                    payRate: $("#JobPayRateFrom"),
                    payRateTo: $("#JobPayRateTo"),
                    startOn: $("#StartOnDate"),
                    duration: $("#Duration"),
                    checkAvailabilityForm: $("#checkAvailabilityForm"),
                    availabilityLocation: $("#checkAvailabilityForm #JobLocation"),
                    candidateIds: $("#CandidateIds"),
                    tempJobId: $("#TempJobId"),
                    msgPanel: $("#msgPanel"),
                    msg: $(".msg"),
                    errorAvailability: $("#availabilityError"),
                    availabilityConfirmationDialog: $("#availabilityConfirmationDialog"),
                    infoBubbleMessage : $("#infoBubbleMessage"),
                    availabilityConfirmationMsg: $("#availabilityConfirmationDialog .msgDialog"),
                    downloadInfoLink : $("#downloadInfoLink")
                },
                preview: {
                    previewBtn: $('.previewBtn')

                },
                messagePanel: $("#messagePanel")
            },
            minWageRate : @Constants.Range.ApprenticeshipsPerHourMin,
            authentication : @(Request.IsAuthenticated.ToString().ToLower()),
            minDate: '@String.Format("{0:yyyy/MM/dd}", DateTime.Now)',
            pageInfo: {
                number: @Model.Results.PageNumber,
                size: @Model.Results.PageSize,
                resultsCount: @Model.TotalResultsCount
            },
            criteria : @Html.Raw(new JavaScriptSerializer().Serialize(Model.Criteria)),
            remainingAccessLimit: @Model.AccessInfo.Remaining,
            totalAccessLimit: @Model.AccessInfo.Limit,
            availableCandidates: @Model.AvailableCandidates,
            candidates: @Html.Raw(new JavaScriptSerializer().Serialize(Model.Results ?? Model.Results.ToJSON()))
        };
    })
</script>

Answer 1

问题不在于您在问题中显示的代码，而在于您如何要求RequireJS加载模块。当您对此表单进行require调用时，会显示您显示的错误消息：

var foo = require('foo');

除非 require已经加载，否则此类foo调用不起作用，并且为了确保它已经加载，您可以自己手动加载它，或者您可以拥有RequireJS为你做。但是，要让RequireJS为您完成，您需要以某种方式编写代码。如果您希望模块使用foo并且您想使用上面的require，那么您应该这样做：

define(function (require) { var foo = require('foo'); ... });

或者如果您需要使用module和exports，则回调可以是function (require, exports, module) {...。

此外，您应按此顺序执行以下操作：

加载RequireJS。

执行define('options', ...。

然后才开始加载你的应用程序。

这意味着在data-main之后移除require并使用明确的define('options'来电。

要求js在html脚本标签中定义模块

1 个答案: