Implementieren von AMD in JavaScript mit RequireJS

Question

Ich bin total neu in RequireJS, also versuche ich immer noch, mich zurecht zu finden. Ich hatte ein Projekt, das vollkommen in Ordnung war, dann entschied ich, RequireJS zu verwenden, also vermasselte ich es :)

Mit diesem aus dem Weg, habe ich ein paar Fragen über RequireJS und wie es alles herausfindet. Ich habe die Dateihierarchie innerhalb des Scripts Ordner:

Ich habe die folgende Zeile in meinem _Layout.cshtml Datei:

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

Und hier ist meine bootstrap.js Datei:

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

Dann habe ich meine Module mit der define Funktion implementiert. Ein Beispiel ist das Pubsub-Modul:

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

Ich habe im Grunde genommen die gleiche Sache für alle meine Javascript-Dateien. Beachten Sie, dass die eigentliche Datei mit dem Pubsub-Modul jquery.pubsub.js im Ordner /Scripts/utils ist. Dies ist auch bei anderen Modulen der Fall.

UPDATE:

Ok ich jetzt meine Bootstrap-Datei aktualisiert, dass ich denke, Ich verstehe, was ein Shim ist und warum sollte ich es verwenden werden. Aber es funktioniert immer noch nicht für mich, obwohl ich auch alle Wege erklärt habe, von denen ich denke, dass sie mir Schwierigkeiten bereitet hätten, sie richtig zu machen. Die Sache ist, dass es nicht in meinen require Callback innerhalb der Bootstrap-Datei geht, also denke ich, habe ich noch ein Problem in der Art, wie ich meine Module konfiguriere oder definiere?

Answer 1

Nun, zum einen, wenn Sie eine nicht-Amd-Bibliothek, sagen wir jQuery, mit require und haben die jQuery-Funktion an den Rückruf übergeben, müssen Sie eine Shim mit Exporten in Ihrer require-Konfiguration, wie also:

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

Ansonsten bin ich mir nicht sicher, ob ich verstehe, was genau dein Problem ist.

Answer 2

Wenn Sie mit ASP.NET MVC bei RequireJS for .NET

Die RequireJS für .NET-Projekt einen Blick glatt den Rahmen RequireJS integriert mit ASP.NET MVC auf der Server-Seite unter Verwendung von XML-Konfigurationsdateien, Aktion Filterattribute, ein Basiscontroller für Vererbung und Hilfsklassen.

Answer 3

Ich habe nicht vollständig verstanden, was das Problem ist. Aber wenn es zu JS Bibliotheken bezieht sich mit require.js geladen werden dann diese Boot-Datei funktioniert für mich:

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

Bitte beachten Sie, gibt es keine‘Js in Pfade.

BTW, wenn Sie MVC 4 verwenden, brauchen Sie @ Url.Content in 'href' und 'src' nicht mehr.