5

私は RequireJS にまったく慣れていないので、まだそれを回避する方法を見つけようとしています。私は完全に正常に機能していたプロジェクトを持っていたので、RequireJSを使用することにしたので、めちゃくちゃにしました:)

それはさておき、RequireJS と、それがどのようにすべてを把握するかについていくつか質問があります。scripts フォルダー内にファイル階層があります。

ここに画像の説明を入力

_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これは他のモジュールでも同様です。

アップデート：

わかりました。シムとは何か、なぜシムを使用する必要があるのか​​ を理解したと思うので、ブートストラップ ファイルを更新しました。しかし、それはまだ私にとってはうまくいきませんが、私はそれらを正しくするのに問題を引き起こしたと思われるすべてのパスも宣言しました. 問題は、ブートストラップ ファイル内のコールバックにも入っていないということですrequire。そのため、モジュールを構成または定義する方法にまだ問題があると思いますか?

4

3 に答える 3

1

まず、amd 以外のライブラリ (jQuery など) を require で使用し、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 プロジェクトは、xml 構成ファイル、アクション フィルター属性、継承用の基本コントローラー、およびヘルパー クラスを使用して、サーバー側で RequireJS フレームワークを ASP.NET MVC とスムーズに統合します。

于 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 に答える