Geek asks and answers

Embedding AMD in JavaScript using RequireJS

I'm completely new to RequireJS, so I'm still trying to find a way around this. I had a project that worked perfectly, then I decided to use RequireJS, so I messed it up :)

With that in mind, I have a few questions about RequireJS and how this all figure out. I have a file hierarchy inside the scripts folder:

enter image description here

I have the following line inside my file _Layout.cshtml:

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

And here is my bootstrap.js file:

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();
    });

Then I implemented my modules using a function define. An example is the pubsub module:

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. .

UPDATE:

, , , , . , , , , . , require bootstrap, , , , ?

+5
3

, , non-amd, , jQuery, jQuery , ,

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

, , , .

+1

ASP.NET MVC, RequireJS .NET

RequireJS .NET RequireJS ASP.NET MVC , xml, , .

0

, . JS require.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, @Url.Content 'href' 'src'.

0

More articles:


All Articles