5

我对 RequireJS 完全陌生，所以我仍在努力寻找解决方法。我有一个运行良好的项目，然后我决定使用 RequireJS，所以我把它搞砸了 :)

顺便说一句，我有几个关于 RequireJS 以及它如何计算一切的问题。我在脚本文件夹中有文件层次结构：

在此处输入图像描述

我的_Layout.cshtml文件中有以下行：

<script data-main="@Url.Content("~/Scripts/bootstrap.js")" src="@Url.Content("~/Scripts/require-2.0.6.js")" type="text/javascript"></script>

这是我的 bootstrap.js 文件：

require.config({
    shim: {
        'jQuery': {
            exports: 'jQuery'
        },
        'Knockout': {
            exports: 'ko'
        },
        'Sammy': {
            exports: 'Sammy'
        },
        'MD': {
            exports: 'MD'
        }
    },
    paths: {
        'jQuery': 'jquery-1.8.1.min.js',
        'Knockout': 'knockout-2.1.0.js',
        'Sammy': 'sammy/sammy.js',
        'MD': 'metro/md.core.js',
        'pubsub': 'utils/jquery.pubsub.js',
        'waitHandle': 'utils/bsynchro.jquery.utils.js',
        'viewModelBase': 'app/metro.core.js',
        'bindingHandlers': 'app/bindingHandlers.js',
        'groupingViewModel': 'app/grouping-page.js',
        'pagingViewModel': 'app/paging-page.js'
    }
});

require(['viewModelBase', 'bindingHandlers', 'Knockout', 'jQuery', 'waitHandle', 'MD'], function (ViewModelBase, BindingHandlers, ko, $, waitHandle, MD) {
    BindingHandlers.init();

    $(window).resize(function () {
        waitHandle.waitForFinalEvent(function () {
            MD.UI.recalculateAll();
        }, 500, "WINDOW_RESIZING");
    });

    var viewModelBase = Object.create(ViewModelBase);
    ko.applyBindings(viewModelBase);
    viewModelBase.initialize();
});

    require(['viewModelBase', 'bindingHandlers', 'Knockout'], function (ViewModelBase, BindingHandlers, ko) {
        BindingHandlers.init();

        var viewModelBase = new ViewModelBase();
        ko.applyBindings(viewModelBase);
        viewModelBase.initialize();
    });

然后我使用该define函数实现了我的模块。一个例子是 pubsub 模块：

define(['jQuery'], function ($) {
    var 
        publish = function(eventName) {
            //implementation
        },
        subscribe = function(eventName, fn) {
            //implementation
        }
    return {
        publish: publish,
        subscribe: subscribe
    }
});

我基本上对我的所有 javascript 文件都做了同样的事情。请注意，包含 pubsub 模块的实际文件jquery.pubsub.js位于/Scripts/utils文件夹内。其他模块也是如此。

更新：

好的，我现在更新了我的引导文件，因为我想我了解什么是 shim 以及为什么我应该使用它。但它仍然对我不起作用，尽管我还宣布了所有我认为会导致我无法正确使用它们的路径。问题是它甚至没有进入require引导文件中的回调，所以我想我在配置或定义模块的方式上仍然存在问题？

4

3 回答 3

1

好吧，首先，如果你要使用一个非 amd 库，比如 jQuery，需要将 jQuery 函数传递给回调，你需要在你的 require 配置中指定一个带有导出的 shim，如下所示：

require.config({
    shim: {
        jQuery: {
            exports: '$'
        }
    },
    paths: {
        jQuery: 'jquery-1.8.1.min.js',
    }
});

除此之外，我不确定我是否了解您的问题到底是什么。

于 2012-09-05T21:06:36.877 回答
0

如果您使用的是 ASP.NET MVC，请查看RequireJS for .NET

RequireJS for .NET 项目将 RequireJS 框架与服务器端的 ASP.NET MVC 使用 xml 配置文件、操作过滤器属性、用于继承的基本控制器和帮助程序类顺利集成。

于 2012-09-07T08:35:24.237 回答
0

我不完全明白问题是什么。但是，如果它与要使用 require.js 加载的 JS 库有关，那么这个引导文件对我有用：

require.config({
    paths: {
        "jquery": "/scripts/jquery-1.8.2",
        "sammy": "/scripts/sammy-0.7.1"
    },
    shim: {
        "sammy": {
            deps: ["jquery"],
            exports: "Sammy"
        }
    }
});

require(["jquery", "sammy"], function ($) {
    $(document).ready(function () {
        alert("DOM ready");
    });
});

请注意，路径中没有“.js”。

顺便说一句，如果您使用 MVC 4，则不再需要“href”和“src”中的@Url.Content。

于 2012-11-10T14:01:24.453 回答